一文详解Javascript DOM树结构

么是DOM树？

DOM（Document Object Model）即文档对象模型。通过DOM树这样一种结构，不仅可以直观的看到HTML的整体结构，还可以利用DOM树的一些属性获取到某个元素的子节点和节点名称等信息。

HTML文档结构：

树形结构：

childNodes和nodeName属性

childNodes属性：获取当前节点的子节点。

<div id="box">
    <p>第一个child节点</p>
    <h4>第二个child节点</h4>
    <div>第三个child节点</div>
</div>

<script>
    let box=document.getElementById("box");
    let boxChild=box.childNodes;
    console.log(boxChild);
</script>

空格和换行也属于一个节点，用text表示。

for(let i=1;  i < boxChild.length; i +=2)
	console.log(boxChild[i]);

获取1、3、5……奇数节点。

nodeName属性：返回节点名称。

for(let i=1;  i < boxChild.length; i +=2)
	console.log(boxChild[i].nodeName);

appendChild方法

appendChild(node)：在子节点最后一位插入新节点，node为新节点的名称。

let newnode=document.createElement("p");
newnode.innerHTML="新节点";
box.appendChild(newnode);

console.log(boxChild);

removeChild方法

removeChild(node)：删除指定父级元素的某个子节点。

项目目标：点击删除按钮，依次删除列表中书籍。

btn.onclick=function(){
    list.removeChild(list.childNodes[1]);
}

parentNode属性

parentNode属性：返回指定节点的父节点。

<div id="box">
    <p id="box-item1">第一个child节点</p>
    <h4>第二个child节点</h4>
    <div>第三个child节点</div>
</div>

<script>
    let box_item1=document.getElementById("box-item1");
    console.log(box_item1.parentNode);
</script>

项目目标：点击叉号删除内容。

x.onclick=function(){
    document.body.removeChild(this.parentNode);
}

replaceChild方法

replaceChild(newnode,oldnode)方法：用新节点替换之前的节点。

<div id="box">
    <p id="box-item1">第一个child节点</p>
    <h4>第二个child节点</h4>
    <div id="box-item3">第三个child节点</div>
</div>

<script>
    let box_item1=document.getElementById("box-item1");
    console.log(box_item1.parentNode);

    let h1=document.createElement("h1");
    h1.innerHTML="新节点 第三个child节点";

    let box_item3=document.getElementById("box-item3");

    let box=document.getElementById("box");

    box.replaceChild(h1, box_item3);
</script>

insertBefore方法

insertBefore可以在已有的子节点前插入一个新的子节点。
项目目标：点击按钮，在ul标记子节点的第一位插入包含内容“我的世界”，文字颜色为红色的h4节点。

let btn=document.getElementById("button");
let game=document.getElementById("game");
btn.onclick=function() {
	let newGame=document.createElement("h4");
	newGame.innerHTML="我的世界";
	newGame.style.color="red";
	newGame.style.paddingLeft="40px";
	game.insertBefore(newGame, game.firstChild);
}

setAttribute属性

setAttribute属性：添加指定的属性，并为其赋指定的值。

项目目标：点击“变”按钮，将输入框变为按钮。

let btn=document.getElementById("btn");
let input=document.getElementById("put");
btn.onclick=function() {
	input.setAttribute("type", "button");
}

视频讲解

.什么是Dom树

Dom树简单来说就是浏览器解析从服务器接收的html代码转化为树形结构,使之每一项都成为一个Dom对象

2.Dom树的组成及关系

Dom树是由html代码中的每一个标签,属性等对象转化的节点组成,html为根节点其他的为子节点,节点中的各种关系可以用我们的家族关系来描述,主要是父与子,兄与弟的关系

3.Dom树的作用

1.便于浏览器通过Dom树结构渲染整个网页页面(与CSS共同作用)

2.便于用户通过Dom树对其节点的增删改查操作

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dom树</title>
</head>
<body>
    <ul>
        <li>郑州</li>
        <li>开封</li>
        <li>洛阳</li>
    </ul>
</body>
</html>

由上面的html代码可以转化的Dom树结构如下图所示

Dom树结构

由上图可知此Dom树中根元素HTML有两个子元素:head与body;head与body是HTML的子元素,所以它们是父子关系;head与body在Dom节点中是兄弟关系;body节点中的ul与li之间是父子关系,li之间是兄弟关系

4.Dom树节点间的层次关系

深度:是相对于根节点而言,如果深度相同并且父节点也相同,则可认为两个节点是兄弟节点

索引:是相对于父节点而言,索引相同的节点并不一定是兄弟节点,因为其父节点不一定相同

Dom树节点的层次

在线咨询

上一篇：纯 CSS 实现一张霓虹灯背景的魔术卡
下一篇：2024年度精选：五大CSS框架助力前端开发

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商