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

• 简化or标准化一些操作。
• 最主要的两个扩展：选择符API、HTML5；元素遍历也是一个有用的工具、扩展；一些专有扩展标准化是众望所归。

选择符API（Selecrtors API）

• 选择符API：用于将CSS选择器和DOM对元素的选择联系起来，并且简化DOM对元素的选择（实现这个功能的有jQuery：通过CSS选择符查询DOM文档）
• Selector API Leve1核心的两个方法：querySelector(), querySelectorAll()。可通过Document或者Element实例调用它们（在document或者element节点上调用，以在其后代节点上查询。）
• querySelector()接收一个CSS选择器，返回第一个匹配的元素，如果没有则返回null
• querySelectorAll()接收一个CSS选择器，返回一个带有所有属性和方法的NodeList实例。
• 这个NodeList是一个“快照”，不会对文档进行动态查询和搜索了（也就没有性能问题）。如果没有找到，则返回的NodeList为空。
• 可以用[]也可以用item()对这个NodeList进行查询。
• matchesSelector() （Selectors API Level2新增）
• 传入选择器，如果调用这个方法的元素与选择器匹配，返回true，否则则是false。
• 用于查询元素能否被上面两个方法返回。
• 2011中的时候还没有浏览器支持，只有各自的实验性方法，需要用包装函数进行处理。

元素（节点）遍历

• 为应对不同浏览器对空格的处理方式的不同，规定了一组只用来遍历元素节点的属性。

HTML5（也是一个扩展）

• HTML5涉及面是否的广，其中更是十分详细的说明了与JS相关的API，有一些与DOM重合，在此对DOM节点相关的内容进行说明。
• 实际上是对之前在浏览器中普遍流行的部分专有扩展的标准化
• 与类相关的扩展
• getElementsByClassName()：返回的是NodeList，有性能问题。
• classList属性。主要处理具有多个类的标记。
• 可以通过这个属性进行删除、添加、是否包含、轮换处理等操作（element.classList.remove()/add()/contains()/toggle()）
• 是DOMTokenList的实例
• 焦点管理：document.actitveElement属性、document.hasFocus()方法判断文档是否获得焦点
• HTMLDocument变化
• readyState属性（loading、complete）：用它来实现一个指示文档已经加载完毕的指示器。
• 兼容模式（从IE6开始区分渲染页面的模式是标准的还是混杂的）。compatMode属性说明采取了哪种渲染模式：标准CSS1Compat、混杂模式BackCompat。
• head属性：document.head
• 字符集相关属性: document.charset/defaultCharset。前者表示实际使用的，后者则是默认的。
• 对于自定义数据的管理
• 对于自定义的属性首先需要加前缀data-
• 通过dataset属性来访问这些自定义属性的值，是名值对的映射，不过访问到的属性名没有data-前缀
• 插入标记
• innerHTML：会替换掉原来的所有子节点（替换成新的树）。注意会对字符串进行编码，所以对于必要的字符串要好好的转义。
• 对于<script>/<type>等IE8及更早的版本视为“无作用域”元素，需要在前面添加必要的有作用域的元素，以使之起作用。
• window.toStaticHTML()：IE8的一个方法，将输入的内容处理成“无害”的，即不绑定任何脚本节点和事件处理程序属性。
• outerHTML：similiar to innerHTML，不过会连调用的节点一起替换掉。
• insertAdjacentHTML()方法：两个参数：插入位置（“beforebegin”/"beforeend"/"afterbegin"/"afterend"）
• 内存和性能问题：主要是对于事件处理程序和JS的对象属性的处理问题，建议随时关注并且在必要的情况下手动删除。尽量避免多次调用innerHTML等。
• scrollIntoView()方法：顾名思义

专有扩展（非标准，浏览器所有）

• 文档模式：
• 4种文档模式：IE5/IE7/IE8/IE9
• meta中http-quiv="X-UA-Compatible"配合其content=“IE=IEVersion"处理。
• IEVersion：Edge/EmulateIE9/EmulateIE8/EmulateIE7/9/8/7/5
• 通过document.documentMode属性可以知道文档模式
• children属性：避免不同浏览器对空白节点的处理。这个属性只考虑后代元素节点。
• contains()方法：判断某个节点是否是调用节点的后代节点
• DOM level3中有功能更加完善的compareDocumentPosition()方法（处理掩码）
• 使用浏览器及能力检测，可以构建通用的contains函数
• 插入文本：未被HTML5纳为标准的innerText、outerText属性。只处理文本节点。考虑兼容的问题的时候，与textContent功能相似
• 滚动：scrollIntoViewIfNeeded()/scrollByLines()/scrollByPages():后两者作用对象是元素自身，前者以及scrollIntoView()的作用对象是元素的容器。
• 注意到：对于DOM扩展，很多情况下需要应用能力检测，确保浏览器间的兼容。