创建

元素节点

document.createElement()

在HTML文档中，标签名是不区分大小写，XML文档是区分大小写。
使用 createElement() 方法创建新元素的同时也会将其 ownerDocument 属性设置为 document 。可以再为其添加属性、添加更多子元素。

文本节点

document.createTextNode()

注释节点

doucment.createComment()

追加 / 插入 / 移动

p.appendChild(aChild)

  • aChild 要追加给父节点（通常为一个元素）的节点。返回追加后的子节点 （aChild），除非 aChild 是一个文档片段（[DocumentFragment](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment)），这种情况下将返回空文档片段（[DocumentFragment](https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment)）。

  • 如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）

    ParentNode.append

  • IE9

  • 方法在 ParentNode的最后一个子节点之后插入一组 [Node](https://developer.mozilla.org/zh-CN/docs/Web/API/Node) 对象或 [DOMString](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString) 对象。被插入的 [DOMString](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString) 对象等价为 [Text](https://developer.mozilla.org/zh-CN/docs/Web/API/Text) 节点。

  • 与 [Node.appendChild()](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild) 的差异：

    • ParentNode.append()允许追加 [DOMString](https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString) 对象，而Node.appendChild() 只接受 [Node](https://developer.mozilla.org/zh-CN/docs/Web/API/Node) 对象。
    • ParentNode.append() 没有返回值，而 Node.appendChild() 返回追加的 [Node](https://developer.mozilla.org/zh-CN/docs/Web/API/Node) 对象。
    • ParentNode.append() 可以追加多个节点和字符串，而 Node.appendChild() 只能追加一个节点。

      x.insertBefore(a, b)

  • 参数

    • 要插入的节点
    • 参照节点
  • 返回 要插入的节点
  • x.insertBefore(a, b) 在父级 x 节点下的子节点 b 之前插入 a
  • 参照节点为 null 时：x.insertBefore(a, null) 等同于 x.appendChild(a)

    没有 insertAfter(), 可以使用 insertBefore 和 [Node.nextSibling](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nextSibling) 来模拟它。
    在父级 x 节点下的子节点 a 之后插入 b === 在父级x节点下的子节点a的表（下一个同级）节点之前插入 b
    x.insertBefore(b, a.nextSibling);

删除

p.removeChild(c)

  • 参数 删除子节点
  • 返回 被移除的节点
  • 只是在文档中抽离，没有在内存中删除。

    通过 removeChild() 被移除的节点从技术上说仍然被同一个文档所拥有，但文档中已经没有它的位置

节点删除 p.remove()

  • 直接在内存中删除。

    替换

    p.replaceChild(new, origin)

  • 参数

    • 要插入的节点
    • 要替换的节点
  • 返回 要替换的节点

    虽然被替换的节点从技术上说仍然被同一个文档所拥有，但文档中已经没有它的位置

其它

cloneNode()

  • 参数 bool 是否深复制
    • 深复制，会复制节点及其整个子DOM树
    • 浅复制，只复制调用该方法节点
  • 返回 与调用它的节点一模一样的节点
  • 复制返回的节点为孤儿节点（orphan）：属于文档所有，但沿未指定父节点
    • 可以通过 appendChild() / insertBefore() / replaceChild() 把孤儿节点添加到文档中

  • 不会复制添加到 DOM 节点为的 JavaScript 属性。只复制 HTML 属性以及可选地复制子节点。

    normalize()

    处理文档子树中的文本节点。由于解析器实现的差异或DOM操作等原因，可能会出现并不包含文本的文本节点，或者文本节点之间互为同胞关系。

  • normalize() 会检测节点的后代

    • 空文节点 删除
    • 两个同胞节点相邻 合并为一个文本节点