上节讲到了关于 node 节点的相关知识以及它的一些属性和方法，这一节我们再补充几个方法。

（1）node.normalize()

删除空的独占文本节点，并将剩余的连续独占文本节点的数据连接到它们的第一个节点。

需要注意：“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点。

而两个以上相邻文本节点的产生原因包括：

通过脚本调用有关的DOM接口进行了文本节点的插入和分割等。
HTML 中超长的文本节点会被浏览器自动分割为多个相邻文本节点。

由于我没有使用过这个方法，因此我也找不到很好地例子来说明。

（2）node.cloneNode([deep = false])

返回节点的副本。如果 deep 为 true，则副本还包括节点的后代。

deep 参数的意义在于是否采用深度克隆。如果为 true，则该节点的所有后代节点也都会被克隆；如果为false，则只克隆该节点本身。

我这里举一个例子给大家感受下：


  Can you copy everything I say?

接着我给其添加 JavaScript 代码：

const p = document.querySelector('div p');
const clone = p.cloneNode(false);

p.parentNode.appendChild(clone);

这时，我给它添加的 deep 参数为 false，结果如下：

并没有什么变化？这时为什么？我们来看看 DOM 树中的节点层次是什么样的吧：

我么很清楚的看到，确实有一个 p 标签被创建了，而我们使用的是 false。 因此，它仅仅克隆了 p 这个元素节点，而没有克隆它的文本节点。

接着我们将其设置为 true 来看看：

这时，我们就得到了它的副本。

需要注意：克隆一个元素节点会拷贝它所有的属性以及属性值，当然也就包括了属性上绑定的事件(比如onclick="alert(1)")，但不会拷贝那些使用 addEventListener() 方法或者 node.onclick = fn 这种用JavaScript 动态绑定的事件。

（3）node isEqualNode(otherNode)

Node.isEqualNode() 方法可以判断两个节点是否相等。当两个节点的类型相同，定义特征相同（对元素来说，即 id，子节点的数量等等），属性一致等，这两个节点就是相等的。

这个方法就很好理解了，我们所写的 HTML 结构一致，那么它们就可以被认作是相同的节点。

比如这两个 div 就是不相等的。

This is the first element.
This is the second element.

（4）node.compareDocumentPosition(other)

比较当前节点与任意文档中的另一个节点的位置关系。

（5）node.appendChild()

Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。

这个方法我们简直是熟的不能再熟了。

如果被插入的节点已经存在于当前文档的文档树中，则那个节点会首先从原先的位置移除,然后再插入到新的位置。

如果你需要保留这个子节点在原先位置的显示，则你需要先用 Node.cloneNode 方法复制出一个节点的副本，然后在插入到新位置。

我就不举例子了，相信大家都会用。

（5）node.removeChild()

从某个父节点中移除指定的子节点,并返回那个子节点。

和上面的方法一样，不过一个是插入，一个是移除而已。

（6）node.replaceChild(node, child)

用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

我们需要注意它的语法：

replacedNode = parentNode.replaceChild(newChild, oldChild);

新的节点在前，而要被替换的节点在后。

使用方法也很简单，我们可以使用 document.createElement 方法创建出一个节点，在使用它来动态地替换我们想要替换的那个节点。

（7）node.insertBefore()

该方法是在当前节点的某个子节点之前再插入一个子节点。

由于没有 insertAfter 方法。我们可以使用 insertBefore 方法和 nextSibling 来模拟它。

parentDiv.insertBefore(sp1, sp2.nextSibling);

这也很好理解，就是说在我们当前节点的后一个兄弟节点的前面插入该节点，虽然有点绕，但是仔细思考你就明白了。

（8）node.contains()

该方法返回一个布尔值来表示是否传入的节点是该节点的子节点。

该方法其实本质上就是一个包含关系，如果包含该子节点，那么久返回 true。很容易理解。

（9）node.textContent

Node.textContent 属性可以表示一个节点及其内部节点的文本内容。

以前我们使用 innerHTML 来插入内容，其实这是不对的。我们应该正确地改用这个方法来插入相应的文本内容。因为文本不会被解析为 HTML，所以它很可能在性能表现上会更好，同时还能够避免XSS攻击。

const p = document.querySelector('div p');
p.textContent = 'I LOVE YOU';

总结

到此，我们的 node 的知识就全部讲完了，当然还有几个我们基本用不上的方法我就不在这里介绍了，感兴趣的话可以去 MDN 上寻找。

Node（三）