JS之DOM（3）（节点操作）

目录

节点操作

节点概述

节点的基本属性

节点层级

1、父级节点  node.parentNode

2、子节点  .childNodes/.children

3、兄弟节点 node.nextSibling/.previousSibling

 创建和添加节点

创建节点

添加节点

样例

删除节点

复制节点

---

节点操作

之前学习到的利用DOM提供的获取元素的方法（如document.getElementById()等）逻辑性不强且较为繁琐。所以现在学习利用节点层次关系来获取元素，逻辑性强但是兼容性较差。

节点概述

网页中所有的内容都是节点（标签、属性、文本、注释等），在DOM中用node表示。

DOM树中所有的节点都可以通过JS进行访问，所有HTML元素（节点）都可以被修改也可以被创建或删除。

节点的基本属性

节点的基本属性包含了nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）。

• 元素节点nodeType为1（节点操作主要操作的是该类节点）
• 属性节点nodeType为2
• 文本节点nodeType为3（文本节点包含文字、空格、换行等）

节点层级

在DOM树中可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

1、父级节点  node.parentNode

<div class="box">
    <span class="erweima"></span>
</div>
<script>
    console.log(erweima.parentNode);
</script>

注意： 得到的是离元素最近的父级节点，如果找不到父节点就返回为 null

2、子节点  .childNodes/.children

返回包含指定节点的子节点的结合，该集合为及时更新的集合。

<ul>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
    <li>我是li</li>
</ul>
<script>
    console.log(ul.childNodes);
</script>

以上样例中得到的集合中会有九个元素，分别包含text（每行的换行）和li。所以要注意childNode得到的子节点包含了元素节点、文本节点等等。

若想只得到元素节点则需要专门处理，所以一般不建议使用childNodes。处理方法如下：

 parerntNode.children是一个只读属性，返回的所有子元素节点。他只返回子元素节点，其余节点不返回。于是上述若想要只得到元素节点可以使用该方法。

此外子节点还提供了另外一个操作parentNode.firstChild(返回第一个子节点)和 parentNode.lastChild(返回最后一个子节点)

但要注意通常第一个和最后一个字节点为文本节点text。于是此时又有另外一个方法：parentNode.firstElementChild(返回第一个元素节点)(由于兼容性问题，该方法I9以上才支持)

实际开发写法：获取第一个：parentNode.children[0];

获取最后一个：parentNode.children[parentNode.length - 1];

3、兄弟节点 node.nextSibling/.previousSibling

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
console.log(div.nextSibling);//此时得到的并不是span而是换行（文本节点）
</script>

previousSibling返回的是当前元素的上一个兄弟节点，找不到同样返回null。

与子节点一样，兄弟节点也提供了只获取元素节点的方法：node.nextElementSibling(下一个兄弟元素节点)，同理previousElementSibling(上一个兄弟元素节点)。（有兼容性问题，IE9以上才支持）

要想解决兼容性问题可以自己封装一个兼容性函数：

 创建和添加节点

创建节点

document.creatElement('tagName')

该方法创建由tagName指定的HTML元素，由于这些元素原先不存在，是根据需求动态生成的，所以也称为动态创建元素节点。

添加节点

node.appendChild(child)

该方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。

node.insertBefore(child,指定元素)

该方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before为元素。

样例

<ul>
    <li>123</li>
</ul>
<script>
//创建节点元素节点
var li = document.createElement('li');
//添加在后面
var ul = document.querySelector('ul');
ul.appendChild(li);
//添加在前面
var lili = document.createElement('li');
ul.insertBefor(lili,ul.children[0]);

 若原本ul里面就有了li标签，则新增的li标签添加在原本li标签的后面。

删除节点

node.removeChild(child)

该方法从DOM中删除一个子节点，返回删除的节点。样例：

复制节点

node.cloneNode()

该方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。

注意：

• 如果括号参数为空或者false，则是浅拷贝，即只拷贝复制节点本身，不克隆里面的子节点。反之括号里面为true则为深拷贝，标签内容均复制。