DOM ​

文档对象模型（Document Object Model，DOM）定义了访问文档的标准。
JavaScript可以通过DOM增删查改页面内容。

DOM树状结构 ​

DOM 将 HTML 表示为标记的树结构，每个树节点都是一个对象。

自动更正 ​

• 生成 DOM 时，浏览器会自动处理文档中的错误、关闭标签等。
• 如果文档中有空格，那么它们就会成为 DOM 中的文本节点。块级元素前后空格会被去掉

节点类型 ​

有 12 种节点类型。在实践中，我们通常使用其中的 4 个：

• document– DOM 的“入口点”。
• 元素节点 – HTML 标签。
• 文本节点 – 包含文本。
• 注释 – 可以存放信息，它不会显示，但 JS 可以从 DOM 读取它。

节点操作方法 ​

• 增
  • 创建
    js

    document.createElement("p")
    document.createTextNode("This is a new paragraph.")

  • 插入
    js

    parent.insertBefore(target, child) //在parent子节点target前添加child
    parent.appendChild(child)  //在parent子节点末尾添加child

• 删
  js

  parent.removeChild(child)  //移除子节点，兼容性更好
  child.remove() //移除节点

• 查
  • getElementById()、getElementsByClassName()、getElementsByTagName()
  • querySelector()、querySelectorAll()，jQuery风格查找元素
  • parent.childNodes、document.frames、document.forms、document.images等，直接使用合集查找元素
• 改
  js

  parent.replaceChild(child1, child2)  //替换子节点

参考资料 ​

• DOM tree
• w3schools