学习第六天（2019-11-19）
第十一章 DOM扩展
虽然DOM作为 API 已经非常完善了，但为了实现更多的功能，仍然会有一些标准或专有的扩展。对DOM的两个主要的扩展是 Selectors API（选择符 API）和 HTML5。此外，还有一个不那么引人瞩目的 Element Traversal （元素遍历）规范，为 DOM添加了一些属性。
一、选择符API
1、Selectors API（www.w3.org/TR/selectors-api/）是由 W3C 发起制定的一个标准，致力于让浏览器原生支持 CSS查询。
2、Selectors API Level 1的核心是两个方法：querySelector()和 querySelectorAll()。在兼容的浏览器中，可以通过 Document 及 Element 类型的实例调用它们。
3、querySelector()方法接收一个 CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null；
4、querySelectorAll()方法接收的参数也是一个 CSS选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例。 具体来说，返回的值是带有所有属性和方法的NodeList，而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用 NodeList 对象通常会引起的大多数性能问题。
5、Selectors API Level 2规范为 Element 类型新增了一个方法 matchesSelector()。这个方法接收一个参数，即 CSS选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。
二、元素遍历
1、对于元素间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样， 就导致了在使用 childNodes 和 firstChild 等属性时的行为不一致。为了弥补这一差异，而同时又保 持DOM规范不变，Element Traversal规范（www.w3.org/TR/ElementTraversal/）新定义了一组属性。
2、Element Traversal API为 DOM元素添加了以下 5个属性：childElementCount、 firstElementChild、lastElementChild、previousElementSibling、nextElementSibling。支持的浏览器为 DOM元素添加了这些属性，利用这些元素不必担心空白文本节点，从而可以更方便地查找 DOM元素。
三、HTML5
1、与类相关的扩充
a、getElementsByClassName()方法 ，可以通过 document 对象及所有 HTML元素调用该方法，该方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。传入多个类名时，类名的先后顺序不重要。
b、 classList 属性，HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加 classList 属性。这个 classList 属性是新集合类型 DOMTokenList 的实例。
2、焦点管理
a、HTML5也添加了辅助管理 DOM焦点的功能。首先就是 document.activeElement 属性，这个属性始终会引用 DOM中当前获得了焦点的元素。
b、另外就是新增了 document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
3、HTMLDocument的变化
a、 readyState属性 ：IE4早为document对象引入了readyState属性。。Document的readyState 属性有两个可能的值： loading正在加载文档；complete已经加载完文档。
b、兼容模式自从 IE6开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为浏览器的必要功能。IE为此给 document 添加了一个名为 compatMode 的属性，这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。
c、. head 属性：作为对 document.body 引用文档的<body>元素的补充，HTML5新增了 document.head 属性，引用文档的<head>元素。
4、字符集属性
HTML5新增了几个与文档字符集有关的属性。其中，charset 属性表示文档中实际使用的字符集， 也可以用来指定新字符集。
另一个属性是defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。
5、自定义数据属性
HTML5规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的 信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。
可以通过元素的 dataset 属性来访问自定义属性的值。dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对儿的映射。在这个映射中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有 data-前缀（比如，自定义属性是 data-myname， 那映射中对应的属性就是 myname）
6、插入标记
通过 DOM操作仍然较为麻烦，使用插入标记的技术，直接插入HTML字符串不仅更简单，速度也更快。
a、 innerHTML 属性
在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应 的 HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
b、outerHTML属性
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
c、insertAdjacentHTML()方法是插入标记的最后一个新增方式。这个方法早也是在IE中出现的，它接收两个参数：插入位置和要插入的HTML文本。
d、内存与性能问题：这里替换子节点可能会导致浏览器的内存占用问题，尤其是在 IE中，问题更加明显。在删除带有事件处理程序或引用了其他 JavaScript 对象子树时，就有可能导致内存占用问题。假设某个元素有一个事件处理程序（或者引用了一个 JavaScript对象作为属性），在使用前述某个属性将该元素从文档树中删除后，元素与事件处理程序（或 JavaScript 对象）之间的绑定关系在内存中并没有一并删除。如果这种情况频繁出现，页面占用的内存数量就会明显增加。因此，在使用 innerHTML、 outerHTML 属性和 insertAdjacentHTML()方法时，好先手工删除要被替换的元素的所有事件处理程序和 JavaScript对象属性。
7、scrollIntoView()方法
HTML5终选择 scrollIntoView()作为解决滚动页面的标准方法。
scrollIntoView()可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
四、专业扩展
1、文档模式：IE8引入了一个新的概念叫“文档模式”（document mode）。页面的文档模式决定了可以使用什么功能。换句话说，文档模式决定了你可以使用哪个级别的 CSS，可以在 JavaScript中使用哪些 API，以及如何对待文档类型（doctype）。
2、children 属性
由于IE9之前的版本与其他浏览器在处理文本节点中的空白符时有差异，因此就出现了 children 属性。这个属性是 HTMLCollection 的实例，只包含元素中同样还是元素的子节点。除此之外， children 属性与 childNodes 没有什么区别，即在元素只包含元素子节点时，这两个属性的值相同。
3、 contains()方法
在实际开发中，经常需要知道某个节点是不是另一个节点的后代。IE为此率先引入了 contains() 方法。调用 contains()方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回 true；否则，返回 false。
5、插入文本
IE原来专有的插入标记的属性 innerHTML 和 outerHTML已经被 HTML5纳入规范。 还有两个没有被纳入 HTML5中的属性是 innerText 和 outerText。
6、滚动
HTML5 在将 scrollIntoView()纳入规范之后，仍然还有其他几个专有方法可以在不同的浏览器中使用。下面几个方法都是对 HTMLElement 类型的扩展，因此在所有元素中都可以调用。scrollIntoViewIfNeeded(alignCenter)、scrollByLines(lineCount)、 scrollByPages(pageCount)。
浙公网安备 33010602011771号