《JavaScript高级程序设计》Chapter 11 DOM 扩展

Chapter 11 DOM 扩展

选择符 API （Selectors API）

1. 目的：让浏览器原生支持 CSS 查询。

2. Selectors API Level 1 的核心是两个方法：querySelector() �������和 querySelectorAll() 。在兼容的浏览器中，可以使用 Document 及 Element 类型的实例调用它们。

3. querySelector

   • 接收一个 CSS 选择符。
   • 返回与该模式匹配的第一个元素，没有则返回 null 。
   • 通过 Document 类型调用 querySelector 时，会在文档元素的范围内查找元素；通过 Element 类型调用 querySelector 时，只会在该元素后代元素的范围内查找匹配的元素。

4. querySelectorAll

   • 接收一个 CSS 选择符。
   • 返回所有与该模式匹配的元素（一个带有属性和方法的 NodeList ），没有则返回一个空的 NodeList 。

5. matchesSelector

   • Selectors API Level 2 规范为 Element 类型熙增了一个方法 matchesSelector() 。
   • 接收一个参数，即 CSS 选择符。
   • 返回一个 bool 值，如果调用元素与该选择符匹配，返回 true ，否则返回 false 。
   • 浏览器使用不同的方法替代实现该方法：

   function matchesSelector(element, selector) {
       if (element.matchesSelector) {
           return element.matchesSelector(selector);
       } else if (element.msMatchesSelector) {
           return element.msMatchesSelector(selector);
       } else if (element.mozMatchesSelector) {
           return element.mozMatchesSelector(selector);
       } else {
           throw new Error("Not Supported");
       }
   }
   

元素遍历

• 对于元素间的空格，IE9 及之前的版本不会返回文本节点，而其他浏览器都会返回文本节点，因此导致了在使用 childNodes 和 fristChild 等属性时的行为不一致。为了弥补差异，Emelent Traversal 规范定义了一组新属性。
  • childElementCount: 返回子元素（不包括文本节点和注释）的个数。
  • firstElementChild: 指向第一个子元素；firstChild 的元素版。
  • lastElementChild: 指向最后一个子元素；lastChild 的元素版。
  • previousElementSibling: 指向前一个同辈元素；previousSibling 的元素版。
  • nextElementSibling: 指向后一个同辈元素；nextSibling 的元素版。

HTML 5

1. 与类相关的扩充：HTML 5 为了简化 CSS 类的用法，新增了很多API。
   • getElementsByClassName 可以通过 document 对象及所有 HTML 元素调用该方法；返回带有指定类型的 NodeList，所以有性能问题。
2. classList 属性
   • className 属性是一个字符串，修改 className 要设置整个字符串的值。
   • HTML 5 新增了一种操作类名的方式：为元素添加 classList 属性。这个属性是新集合类型 DOMTokenList 的实例。
   • DOMTokenList
     • length 属性：表示包含元素个数
     • item() 方法（支持方括号语法）：取得元素
     • add(value) ：将给定的字符串值添加到列表中。
     • contains(value)：列表中是否存在给定值 (true / false)
     • remove(value)：从列表中删除给定字符串
     • toggle(value)：如果列表中存在给定值，删除它；不存在给定值，添加它。
3. 焦点管理
   • document.activeElement 属性：引用 DOM 中当前获得焦点的元素。
     • 页面加载
     • 用户输入（通常是通过按 Tab）
     • 在代码中调用 focus 方法
   • document.hasFocus() 用于确定文档是否获得焦点。如果获得焦点，说明文档正在与用户交互。
4. HTML Document 的变化
   • readyState 属性
     • loading 正在加载文档
     • complete 文档加载完毕
   • 兼容模式
     • document.compatMode 属性
       • 标准模式下："CSS1Compat"
       • 混杂模式下："BackCompat"
   • head 属性
     • document.head 引用文档的 head 元素
5. 字符集属性
   • charset 属性：表示文档中实际使用的字符集，默认值 "UTF-16"
     • 可以通过 元素、响应头部或直接设置 charset 修改。
   • defaultCharset 属性：表示根据默认浏览器及操作系统设置，当前文档默认的字符集应该是什么。如果文档没有使用默认字符集，那 charset 和 defaultCharset 属性的值可能不同。
6. 自定义数据属性
   • HTML 5 规定可以为元素添加非标准属性，前提是要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者语义信息。
   • 添加自定义属性后，可以通过元素的 dataset 属性来访问自定义元素值。
   • dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对的映射。在这个映射中，每一个 data-name 形式的属性都会去掉 data- 前缀并对应一个值。
7. 插入标记
   • innerHTML 属性
     • 读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。
     • 写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
     • 在大多数浏览器中，使用 innerHTML 插入