选择符API
Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。Selectors API Level 1 的核心是两个方法：querySelector()和querySelectorAll()。在兼容的浏览器中，可以通过Document及Element类型的实例调用它们。
querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。通过Document类型调用这个方法时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用的时候，只会在该元素后代元素的范围内查找匹配的元素。如果传入不被支持的选择符，该方法会抛出错误。
querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。如果传入不被支持的选择符，该方法会抛出错误。
Selectors API Level 2 规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
元素遍历
对于元素间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样，就导致了在使用childNodes和firstChild等属性时的行为不一致。为了弥补这一差异，而同时又支持DOM规范不变，Element Traversal规范新定义了一组属性。
- childElementCount：返回子元素（不包括文本节点和注释）的个数。
- firstElementChild：指向第一个子元素；firstChild的元素版。
- lastElementChild：指向最后一个子元素；lastChild的元素版。
- previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
- nextElementSibling：指向后一个同辈元素；nextSibling的元素版。
HTML 5
与类相关的扩充
getElementsByClassName()方法，可以通过document对象及所有HTML元素调用该方法。该方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。调用这个方法时，只有位于调用元素子树中的元素才会返回。
在操作类名时，需要通过className属性添加。删除和替换类名。但这样有点麻烦，HTML5新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList属性。这个classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似，DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。
- add(value)：将给定字符串值添加到列表中。如果值已经存在，就不添加了。
- contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
有了classList属性，除非你需要全部删除所有类名，或者完全重写元素的class属性，否则就用不到className属性了。
焦点管理
HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入和在代码中调用focus()方法。
默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。
另外新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
HTMLDocument的变化
HTML5扩展了HMTLDocument，增加了新的功能。与HTML5中新增的其他DOM扩展类似，这些变化同样基于那些已经得到很多浏览器完美支持的专有扩展。
readyState属性，Document的readyState属性有两个可能的值：loading（正在加载文档）；complete（已经加载完文档）。
compatMode属性，这个属性就是为了告诉开发人员浏览器采用了那种渲染模式。在标准模式下，document.compatMode的值等于“CSS1Compat”，而在混杂模式下，document.compatMode的值等于“BackCompat”。
HTML5新增了document.head属性，引用文档的<head>元素。要引用文档的<head>元素，可以结合使用这个属性和另一个后备方法：var head = document.head || document.getElementsByTagName("head")[0];
字符集属性
charset属性表示文档中实际使用的字符集，也可以用来指定新字符集。
defaultCharset属性表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集，那charset和defaultCharset属性的值可能不一样。
自定义数据属性
HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加随便命名，只要以data-开头即可。
添加了自定义属性后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对的映射。在这个映射中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀（比如，自定义属性是data-myname，那映射中对应的属性就是myname）。
如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能方便地知道点击来自页面中的那个部分。
插入标记
innerHTML属性，在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。使用该属性也有一些限制，比如，在大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本。大多数浏览器都支持以直观的方式通过innerHTML插入<style>元素。无论什么时候，只要使用innerHTML从外部插入HTML，都应该首先以可靠的方式处理HTML。IE8为此提供了window.toStaticHTML()方法，这个方法接收一个参数，即一个HTML字符串；返回一个经过无害处理后的版本----从源HTML中删除所有脚本节点和事件处理程序属性。虽然目前只有IE8原生支持这个方法，但我们还是建议读者在通过innerHTML插入代码之前，尽可能先手工检测一下其中的文本内容。
outerHTML属性，在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
insertAdjacentHTML()方法最早也是在IE中出现的，它接收两个参数：插入位置和插入的HTML文本。第一个参数必须是下列值之一：
- “beforebegin”，在当前元素之前插入一个紧邻的同辈元素；
- “afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
- “beforeend”，在当前元素之下插入一个新的子元素或在最后一个子元素之后在插入新的子元素；
- “afterend”，在当前元素之后插入一个紧邻的同辈元素。
使用这些介绍的方法替换子节点可能导致浏览器的内存占用问题，尤其是在IE中，问题更加明显。在使用innerHTML、outerHTML属性和insertAdjacentHTML()方法时，最好先手工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。而且最好能够将设置innerHTML或outerHTML的次数控制在合理的范围内。
scrollIntoView()方法
该方法可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。为某个元素设置焦点也会导致浏览器滚动并显示出获得焦点的元素。
专有扩展
文档模式
IE8引入了一个新的概念叫“文档模式”。页面的文档模式决定了可以使用什么功能。换句话说，文档模式决定了你可以使用哪个级别的CSS，可以在JavaScript中使用那些API，以及如何对待文档类型。
要强制浏览器以某种模式渲染页面，可以使用HTTP头部信息X-UA-Compatible，或通过等价的<meta>标签来说设置<meta http-equiv="X-UA-Compatible" conten="IE版本">
通过document.documentMode属性可以知道给定页面使用的是什么文档模式。这个属性是IE8中新增的，它会返回使用的文档模式的版本号。
children属性
由于IE9之前的版本与其他浏览器在处理文本节点中的空白符时有差异，因此就出现了children属性。这个属性是HTMLCollection的实例，只包含元素中同样还是元素的子节点。
contains()方法
调用contains()方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回true；否则，返回false。
插入文本
innerText属性，可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本节点拼接起来。在通过innerText写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。
outerText属性，除了作用范围扩大到了包含调用它的节点之外，outText与innerText基本上没有多大区别。
滚动（略）
4438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
