ChildNode

概述

ChildNode 接口包含特定于可以有父级的 Node 对象的方法。

ChildNode 是一个原始接口，并且不能创建此类型的对象；它由 Element，DocumentType 和 CharacterData 对象实现。

它拥有以下四个方法。

（1）ChildNode.before(nodes)

这是一个实验技术
由于此技术的规范尚未稳定，请检查兼容性表以在各种浏览器中使用。 还要注意，实验技术的语法和行为可能随着规范更改而在未来版本的浏览器中更改。

ChildNode.before 方法在此子节点的父节点的子节点列表中（此子节点之前）插入一组 Node 或DOMString 对象。DOMString 对象作为等效的 Text 节点插入。

以下是一个例子：

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.before(span);

console.log(parent.outerHTML);
// "
"

我们可以看到我们的 span 标签虽然是后创建的，但是它却可以插入到 p 标签之前。

---

（2）ChildNode.after(nodes)

与上面的例子是一样的，只不过是在后面进行插入。它也是试验中的功能。

示例：

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.after(span);

console.log(parent.outerHTML);
// "
"

现在的 span 标签就到 p 标签的后面去了。

---

（3）ChildNode.remove

ChildNode.remove() 方法可从它所属的树中删除对象。

虽然这个方法是 ChildNode.remove，但其实可以不用强制使用在子节点中，在一般的节点中也是可以使用的，比如下面这个例子：

Here is div-01
Here is div-02
Here is div-03

我们只需要知道这个方法是可以移除目标对象在 DOM 树种的节点就可以了。

---

（4）ChildNode.replaceWith

ChildNode.replaceWith() 方法将其父节点的子节点列表中的此子节点替换为一组 Node 或 DOMString 对象。DOMString 对象作为等效的 Text 节点插入。

也就是说，这个方法可以直接替换掉子节点中的某一节点元素。

但是很遗憾的是，它现在也只是个实验中的方法。

我们还是拿出最先的那个例子，这次只有小小的变化：

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.replaceWith(span);

console.log(parent.outerHTML);
// "
"

这一次，我们将子节点中的 p 标签直接给替换成 span 了，这就是它的使用方法。

总结

这一节中讲的四个方法，遗憾的是，只能使用 remove 一个。