「这是我参与11月更文挑战的第 14 天，活动详情查看：2021最后一次更文挑战」
上一篇文章 和我一起深入了解文档对象模型（DOM）「一」 着重讲了 DOM 中的层级节点的多种类型以及节点的关系，这里会介绍如何操纵节点，以及节点的其他方法
node 类型
操作节点
因为所有的关系指针都是只读，所以 DOM 额外提供了一些操作节点的方法
appendChild
在 childNodes 列表末尾添加节点。添加新的节点会更新相关的关系指针，比如父节点的最后一个子节点。
appendChild() 会返回新添加的节点，如下：
let returnNode = node.appendChild(newNode);
console.log(returnNode == newNode);
// -> true
console.log(someNode.lastChild == newNode);
// -> true
如果吧文档中已经存在的节点通过 appendChild() 追加到另一个节点上，这个节点就会从旧的位置移到新的位置
let returnN = someN.appendChild(someN.firstChild);
console.log(returnN == someN.firstChild);
// -> false
console.log(returnN == someN.lastChild);
// -> true
如果想把节点插入到 childNodes 中的特定位置，而不是末尾，可以使用 insertBefore(newNode, referNode)， newNode 表示需要插入的节点，referNode 表示参照的节点，方法会返回插入的节点
替换第一个节点：
let returnN = someN.replaceChild(newNode, someN.firstChild);
替换最后一个节点：
let returnN = someN.replaceChild(newNode, null);
// 或者
// let returnN = someN.appendChild(newNode);
移除节点
如果需要移除节点，而不是替换节点，可以使用 removeChild（），这接收一个待移除节点的参数，返回这个被移除的节点（此节点虽然不在 DOM 文档树中，但仍有指针指向这个游离在 DOM 树之外的节点，我们后续可以将这个节点继续添加回文档树）
示例：
// 删除第一个子节点
let formerFirstChild = someN.removeChild(someN.firstChild);
// 删除最后一个子节点
let formerLastChild = someN.removeChild(someN.lastChild);
其他方法
所有的节点类型，还共享了两个方法，一个是 cloneNode()，会返回与调用他的节点一模一样的节点。他接收一个 boolean 参数，表示是否深复制。如果为 true 则会复制当前节点以及其整个 DOM 树；若 false 仅仅复制当前节点
复制的节点，由于没有指定父节点，会游离在文档树之外
最后一个方法是 normalize()。这个方法唯一的任务就是处理文档子树中的文本节点。
由于解析器实现的差异或 DOM 操作等原因，可能会出现并不包含文本的文本节点，或者文本节点之间互为同胞关系。在节点上调用 normalize() 方法会检测这个节点的所有后代，从中搜索上述两种 情形。如果发现空文本节点，则将其删除；如果两个同胞节点是相邻的，则将其合并为一个文本节点。
