快速掌握Web API中的元素节点操作持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

从DOM文档树可以看出，DOM的节点之间存在着关联关系：有着从上而下关系的“父子节点”、有着同一层级关系的“兄弟节点”。而在页面开发中，常常需要对这些关系节点进行操作。下面将对这些节点的操作进行系统描述。

一、节点层级

1、获取父子节点

获取父节点：parentNode；
获取所有子节点：childNodes（返回的是子节点集合，是一个属于NodeList集合）；
获取所有子元素节点：children（返回的是子elements集合，是一个属于HTMLCollection集合）；

//html
<div id="div1">
    <span id="span1">我是span标签</span>
    <p id="p1">我是p标签文</p>
</div>

//js
var span = document.getElementById('span1');
var div = document.getElementById('div1');
console.log(span.parentNode);
console.log(div.childNodes);
console.log(div.children);

2、获取第一个和最后一个子节点（特殊）

firstChild：获取第一个子节点；
lastChild：获取最后一个子节点；

//html
<ul id="main">
    <li>选项一</li>
    <li>选项二</li>
    <li>选项三</li>
</ul>

//js
var main = document.getElementById('main');
console.log(main.firstChild);
console.log(main.lastChild);

3、获取兄弟节点

nextSibling：获取下一个兄弟节点；
nextElementSibling：获取下一个兄弟元素节点；
previousSibling：获取上一个兄弟节点；
previousElementSibling：获取上一个兄弟元素节点；

//html
<ul id="main">
    <li>选项一</li>
    <li id="li3">选项二</li>
    <li>选项三</li>
</ul>

//js
var li3 = document.getElementById('li3');
console.log(li3.nextSibling);
console.log(li3.nextElementSibling);
console.log(li3.previousSibling);
console.log(li3.previousElementSibling);

注：元素节点和节点的区别就是 Element 和 Node 包含的内容的不同。

Node：在 DOM 树中，所有的节点都是 Node ，包括 Element ，也就是说 Node 包含了HTML、Text、以及注释等等内容，它是所有 DOM 的基类。

Element：而在 DOM 树中，Element 是所有 HTML 元素的基类，也就是说，Element 只包含 HTML 元素标签。

二、创建节点

熟悉获取不同关系的节点操作之后，就需要通过代码创建新的节点，创建节点的方法有三种。

1、 document.write()

//html
<span id="btn">我是span标签</span>

//js
document.getElementById('btn').onclick = function () {
    document.write('<p>我是p标签</p>');
}

注：默认情况下，页面由上而下地加载，形成一个文档流，当执行完毕时，文档流就会关闭。而当使用document.write()创建元素时，实际是开启了一个新的文档流，将之前文档流覆盖掉，所以不推荐使用这种方法。

2、 innerHTML

使用innerHTML将会在当前元素中插入一个新的元素。

//html
<span id="btn">按钮</span>
<ul id="main">
    <li>我是li标签1</li>
</ul>

//js
var main = document.getElementById('main');
document.getElementById('btn').onclick = function () {
    main.innerHTML = '<li>我是li标签2</li>';
}

点击前：

截图7.png

点击后：

截图8.png

3、 document.createElement()

在 DOM 树中创建一个标签所对应的DOM对象。

//html
<button id="btn">点击新增一个节点</button>
<ul id="main">
    <li>我是li标签</li>
</ul>

//js
var main = document.getElementById('main');
document.getElementById('btn').onclick = function () {
    var li = document.createElement('li');
    li.innerText='我是新增的li标签';
    li.style.color='red';
    //插入到父节点中
    main.appendChild(li);
}

点击前：

截图9.png

点击后：

截图10.png

三、节点操作

类似于对象属性的增删改，节点操作中也类似的节点方法，以下是常用的节点方法。

createElement(tagName)：创建指定名称 tagName 的 HTML 元素；
appendChild(childNode)：将指定的 childNode 参数作为最后一个子节点添加到当前节点，返回 childNode 。如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离并插入到新的位置；
parentNode.insertBefore(newNode,oldNode)：在当前节点 oldNode 之前插入子节点 newNode 。如果给定的子节点已存在当前文档中，则insertBefore()会将其从当前位置移动到新位置；
removeChild(child)：从当前节点中删除指定的子节点 child ，并返回被删除的子节点；
replaceChild(newChild,oldChild)：在当前节点中，用 newChild 替换 oldChild 并返回被替换掉的 oldChild；

快速掌握Web API中的元素节点操作