关于 DOM 的理解

579 阅读1分钟

什么是 DOM

DOM === 想象的树型结构模型

DOM 提供的 API 的作用就是修改或者查看 HTML 代码;

DOM 的 D 指的是Document,可以认为是 HTML 文档;

DOM 中的 O 指的是 Object,他是在内存中,按照树型结构,通过构造函数(如 Node, Document, Element, Text, Comment),构造出对象,将 DOM 展现到内存中;

DOM 的 M 指的是 Model,因为在 HTML 结构在内存中用一个模型来表示,这个模型就是树型结构。

使用 DOM

JavaScript 将 HTML 文档渲染成 DOM 的树型结构。

获取 DOM 的节点:

  • 直接在 DOM 寻找: document.querySelector(aabb)document.querySelectorAll(aabb)
  • 通过节点关系获得节点:
    兄弟关系 儿子关系 父关系

了解 DOM 的节点:

Node.nodeName  
Node.nodeType  
Node.textContent

创建 DOM 的节点:

document.createElement("div")
// 生成 Element 节点
document.createTextNode("你好")
// 生成 Text 节点