前端系统课程 - 27. DOM API

DOM 树

  • 文档内所有的元素（Element），在 JavaScript 中都有相应的对象，而这些元素或对象，都可以用树形结构表示出来，这个像模型似的属性结构，就是 DOM 树。

  • DOM 中的每个元素，都是节点（Node），因为它们都是 Node 对象的实例。

  • <html> 元素是 document 对象的唯一实例。

  • Node 对象根据不同的构造函数，构造出不同的节点；主要的有 document、Element、Text 等等。

DOM API

  • 用 elem.childNodes 可以获取元素的所有类型的子节点，其中当然包括文本节点、注释节点等，而不是单单获取元素节点。

  • 用 elem.children 可以获取元素的子元素，也就是子标签，只有在 IE 中可能错误地一并获取到注释节点，但是这点不足以掩盖这个方法很好用。

  • 在 DOM 中，document.documentElement 这个属性代表 <html>，虽然 <html> 是根节点，但是在 DOM 里，它还是有爹的，他爹就是 document 对象。

  • <svg> 标签（元素）的 nodeName 属性是小写字母的“svg”，其他标签使用 nodeName 获取标签名，返回的都是大写字母。

  • textContent 与 innerText 主要的不同点在于：

    • textContent 会获取元素内的所有文本内容，包括 <script> 和 style 元素内的，而 innerText 不会；

    • textContent 会获取隐藏元素的文本，而 innerText 不会；

    • innerText 会触发重排，而 textContent 则不会；

    • innerText 会替换元素里的内容，而 textContent 则不会；

    • 综上所述，修改文本内容 textContent 适用面更广。

  • cloneNode() 方法可以复制一个节点，它可以接收一个参数；如果传入 ture，便是深拷贝，会将目标节点的所有子节点都复制下来；如果不传，便是浅拷贝，只会复制目标节点本身。

  • isEqualNode() 方法可以判断两个节点是否相同，也就是判断它们是否为同一种节点。

  • isSameNode() 方法可以判断两个节点是否相等，也就是判断它们是否为同一个节点。

  • 使用 normalize() 方法可以使元素常规化，用来去除一些不必要的混乱。

  • 使用 document.visibilityState 可以获取当前页面的焦点状态（阅读状态）。

  • 搞清楚单词意思，一般就能理解这些接口的用法；难懂的就去查文档。

课后拾遗

  • elem.childNodes 返回的是动态集合；所谓动态集合就是一个活的集合，DOM 树删除或新增一个相关节点，都会立刻反映在 NodeList 接口之中，所以它的长度会随着集合内元素的改变而变化。

  • querySelectorAll() 方法返回的是一个静态集合；DOM 树内部的变化，并不会实时反映在该方法的返回结果之中，所以该方法返回的集合长度，是不会随着集合内元素的改变而变化。

  • HTMLCollection （元素集合）对象与 NodeList （节点集合）对象的区别：

    • HTMLCollection 实例对象的成员只能是 Element 类型的节点，NodeList 实例对象的成员可以包含其他节点。

    • HTMLCollection 实例对象都是动态集合，节点的变化会实时反映在集合中；NodeList 实例对象可能是静态集合，也可能是动态集合。

    • HTMLCollection 实例对象可以用 id 属性或 name 属性引用节点元素，NodeList 只能使用数字索引引用。