005.DOM：改

创建节点

• document.createElement(tag: string)：用给定的标签创建一个元素节点
• document.createElementNS(namespace: string, tag: string)：创建指定 命名空间 下给定标签的元素节点
• document.createTextNode(text: string)：用给定的文本创建一个文本节点
• document.createComment(data: string)：用给定的内容创建一个注释节点
• document.createDocumentFragment()：创建一个片段节点
  • 片段节点：DocumentFragment 是一个特殊的 DOM 节点，用作来传递节点列表的包装器（wrapper）
  • 可以向其附加其他节点，但是当将其插入某个位置时，则会插入其内容，而不是自身

克隆节点

• elem.cloneNode(deep?: boolean)
  • deep 可选，默认为 false，代表是否“深”克隆（同时克隆子孙节点）

插入节点

append、prepend、before、after

• node.append(...nodes or strings) —— 在 node 末尾插入节点或字符串
• node.prepend(...nodes or strings) —— 在 node 开头插入节点或字符串
• node.before(...nodes or strings) —— 在 node 前面插入节点或字符串
• node.after(...nodes or strings) —— 在 node 后面插入节点或字符串
• node.replaceWith(...nodes or strings) —— 将 node 替换为给定的节点或字符串

注意：

• 可以在单个调用中插入多个节点列表和文本片段
  • 如：div.before('<p>Hello</p>', document.createElement('hr'))
• 文字都被“作为文本”插入，而不是“作为 HTML 代码”。因此像 <、> 这样的符号都会被作转义处理来保证正确显示

elem.insertAdjacent*

• elem.insertAdjacentHTML(where, html)
  • where：指定相对于 elem 的插入位置，必须为以下之一：
    • "beforebegin" —— 将 html 插入到 elem 之前
    • "afterbegin" —— 将 html 插入到 elem 开头
    • "beforeend" —— 将 html 插入到 elem 末尾
    • "afterend" —— 将 html 插入到 elem 之后
  • html：HTML 字符串，该字符串会被“作为 HTML” 插入
• elem.insertAdjacentText(where, text) —— 是将 text 字符串“作为文本”插入而不是作为 HTML
• elem.insertAdjacentElement(where, elem) —— 插入的是一个元素节点

后两个方法的存在主要是为了使语法“统一”。实际上，大多数时候只使用 insertAdjacentHTML。因为对于元素和文本，有 append/prepend/before/after 方法 —— 它们也可以用于插入节点/文本片段，而且写起来更短。

移除节点

• node.remove()

注意：如果要将一个元素移动到另一个地方，则无需将其从原来的位置中删除。所有插入方法都会自动从旧位置删除该节点

其他

其他修改 DOM 的方式

通过属性修改 DOM

老旧的插入/移除方法

• parentElem.appendChild(node)：将 node 附加为 parentElem 的最后一个子元素
• parentElem.insertBefore(node, nextSibling)：在 parentElem 的 nextSibling 前插入 node
  • 在第一个子元素前插入：parentElem.insertBefore(node, parentElem.firstChild)
• parentElem.replaceChild(node, oldChild)：将 parentElem 的后代中的 oldChild 替换为 node
• parentElem.removeChild(node)：从 parentElem 中删除 node（假设 node 为 parentElem 的后代）

以上方法都会返回插入/移除的节点

document.write(html: string)

调用 document.write(html) 意味着将 html “就地马上”写入页面。这个方法来自于没有 DOM，没有标准的上古时期。

• 当在浏览器正在读取（“解析”）传入的 HTML 时调用 document.write 方法来写入一些东西，浏览器会像它本来就在 HTML 文本中那样使用它
  • 所以它运行起来出奇的快，因为它不涉及 DOM 修改。它直接写入到页面文本中，而此时 DOM 尚未构建。
• 当在 DOM 加载完成后，这样的调用将会现有文档内容擦除，再设置新的文档内容，之后浏览器重新解析