Chapter 11 DOM 扩展
选择符 API （Selectors API）
-
目的：让浏览器原生支持 CSS 查询。
-
Selectors API Level 1 的核心是两个方法：querySelector() �������和 querySelectorAll() 。在兼容的浏览器中，可以使用 Document 及 Element 类型的实例调用它们。
-
querySelector
- 接收一个 CSS 选择符。
- 返回与该模式匹配的第一个元素，没有则返回 null 。
- 通过 Document 类型调用 querySelector 时，会在文档元素的范围内查找元素；通过 Element 类型调用 querySelector 时，只会在该元素后代元素的范围内查找匹配的元素。
-
querySelectorAll
- 接收一个 CSS 选择符。
- 返回所有与该模式匹配的元素（一个带有属性和方法的 NodeList ），没有则返回一个空的 NodeList 。
-
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
- 与类相关的扩充：HTML 5 为了简化 CSS 类的用法，新增了很多API。
- getElementsByClassName 可以通过 document 对象及所有 HTML 元素调用该方法；返回带有指定类型的 NodeList，所以有性能问题。
- classList 属性
- className 属性是一个字符串，修改 className 要设置整个字符串的值。
- HTML 5 新增了一种操作类名的方式：为元素添加 classList 属性。这个属性是新集合类型 DOMTokenList 的实例。
- DOMTokenList
- length 属性：表示包含元素个数
- item() 方法（支持方括号语法）：取得元素
- add(value) ：将给定的字符串值添加到列表中。
- contains(value)：列表中是否存在给定值 (true / false)
- remove(value)：从列表中删除给定字符串
- toggle(value)：如果列表中存在给定值，删除它；不存在给定值，添加它。
- 焦点管理
- document.activeElement 属性：引用 DOM 中当前获得焦点的元素。
- 页面加载
- 用户输入（通常是通过按 Tab）
- 在代码中调用 focus 方法
- document.hasFocus() 用于确定文档是否获得焦点。如果获得焦点，说明文档正在与用户交互。
- document.activeElement 属性：引用 DOM 中当前获得焦点的元素。
- HTML Document 的变化
- readyState 属性
- loading 正在加载文档
- complete 文档加载完毕
- 兼容模式
- document.compatMode 属性
- 标准模式下："CSS1Compat"
- 混杂模式下："BackCompat"
- document.compatMode 属性
- head 属性
- document.head 引用文档的 head 元素
- readyState 属性
- 字符集属性
- charset 属性：表示文档中实际使用的字符集，默认值 "UTF-16"
- 可以通过
<meta>元素、响应头部或直接设置 charset 修改。
- 可以通过
- defaultCharset 属性：表示根据默认浏览器及操作系统设置，当前文档默认的字符集应该是什么。如果文档没有使用默认字符集，那 charset 和 defaultCharset 属性的值可能不同。
- charset 属性：表示文档中实际使用的字符集，默认值 "UTF-16"
- 自定义数据属性
- HTML 5 规定可以为元素添加非标准属性，前提是要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者语义信息。
- 添加自定义属性后，可以通过元素的 dataset 属性来访问自定义元素值。
- dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对的映射。在这个映射中，每一个 data-name 形式的属性都会去掉 data- 前缀并对应一个值。
- 插入标记
- innerHTML 属性
- 读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。
- 写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
- 在大多数浏览器中，使用 innerHTML 插入
<script>元素并不会执行其中的脚本。 - 不支持 innerHTML 属性的元素：
<col> <colgroup> <frameset> <head> <html> <style> <table> <tbody> <thead> <tfoot> <tr>（在 IE8- 的版本中，<title>也没有 innerHTML 属性。）
- outerHTML 属性
- 在读模式下，outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下，outerHTML 会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素。
- insertAdjacentHTML() 方法
- 接收两个参数：插入位置和要插入的 HTML 文本。
- 第一个参数：
- "beforebegin"：在当前元素之前插入一个紧邻的同辈元素
- "afterbegin"：在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素
- "beforeend"：在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素
- "afterend"：在当前元素之后插入一个紧邻的同辈元素
- 内存与性能问题
- 在使用 innerHTML outerHTML 和 insertAdjacentHTML 时，最好手工删除要被替换的元素的所有事件处理程序和 JavaScript 对象属性。
- 合理使用 innerHTML 和 outerHTML，减少使用次数。
- innerHTML 属性
- scrollIntoView() 方法
- 可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入 true 参数或不传入参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false 参数，调用元素会尽可能全部出现在窗口中，不过顶部不一定平齐。
专有扩展
- Internet Explorer 提供的一些特别的扩展。（详见本书）
网友评论