标签：
对DOM的两个主要的扩展是Selectors API和HTML5。同时还有一个Element Traversal规范。
Level1的核心是两个方法：querySelector()和querySelectorAll()。可以通过Document及Element类型的实例调用它们。注意，querySelectorAll()函数返回的是一个NodeList的实例，其底层实现是类似于数组的快照，而非不断对文档进行搜索的动态查询。
Level2为Element类型新增了一个方法matchesSelector()。
IE8-不会把元素间的空格当成文本节点返回，而其他浏览器会。导致childNodes和firstChild等属性的行为不一致。Element Traversal API为DOM元素添加了五个属性：
1）childElementCount: 返回子元素（不包括文本几点和注释)的个数
2）firstElementChild： 指向第一个子元素；firstChild的元素版。
3）lastElementChild、previousElementSibling和nextElementSibling。
getElementsByClassName()方法。返回的是对象的NodeList，注意性能问题。
classList属性。 这个属性是新集合类型DOMTokenList的实例。有自己的属性和方法，比如length属性，add(value)方法等，操作方便。
document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入和代码中focus()方法调用。刚加载时，body元素获得焦点。新增的document.hasFocus()方法可用于确定文档是不是获得了焦点，用户是不是正与页面交互。
readyState属性。它的两个可能值：loading，正在加载；complete,加载完成。
兼容模式。标准模式下，document.compatMode属性等于”CSS1Compat“；混杂模式下，其值等于"BackCompat”。
head属性。对应document.body,document.head引用文档的<head>元素。
document.charset。与<meta>元素同步。
document.defaultCharset。根据默认浏览器和操作系统设置，当前文档默认的charset。
为元素添加非标准的属性，要添加前缀data-，为元素提供与渲染无关的信息，或提供语义信息。可通过元素的dataset属性来访问自定义属性的值。这个值是DOMStringMap的一个实例，就是一个名值对的映射。
使用插入标记技术，直接插入HTML字符串。
innerHTML属性。不同浏览器返回的文本格式会有所不同，主要指大小写形式。一些限制包括：不会执行其中插入的<script>脚本。不是所有元素都支持innerHTML属性。无论什么时候使用innerHTML从外部插入HTML，都应该先处理。比如IE8中的window.toStaticHTML()方法。
outerHTML属性。可用来实现调用元素的替换。
insertAdjacentHTML()方法。
内存与性能问题。使用前三个方式将元素从文档树中删除后，元素与事件处理程序或JS对象之间的绑定关系在内存中并没有一并删除。最好手工提前删除。
可在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
页面的文档模式决定了可以使用什么功能。比如可以使用哪个级别的CSS。IE9中有4种文档模式。分别是IE5、IE7、IE8和IE9。要强制浏览器以某种模式来渲染页面，可以使用HTTP头部信息X-UA-Compatible。或者<meta>标签。
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
注意这里的IEVersion的值，肯能不与四种文档模式一一对应。
1、Edge：始终以最新的文档模式来渲染页面。忽略文档类型声明。
2、EmulateIE9：如果有文档类型声明，则以IE9标准模式渲染页面，否则文档模式IE5。
3、9：强制以IE9标准模式渲染页面，忽略文档类型声明。
使用document.documentMode属性可以知道给定叶脉内使用的是什么文档模式。
children属性是HTMLCollection的实例，只包含元素中同样还是元素的子节点。
contains()方法用于确实后代关系。DOM Level 3中的compareDocumentPosition()能更详细地描述节点之间的关系。
innerText属性、outerText属性。
scrollIntoViewIfNeeded(alignCenter): 让当前元素滚动至可见。作用对象是元素的容器。
scrollByLines(lineCount):将元素的内容滚动指定的行高。作用对象是元素本身。
scrollByPages(pageCount):将元素的内容滚动指定的页面高度。作用对象是元素本身。
标签：
原文地址：http://www.cnblogs.com/TwoWaterLee/p/5389576.html
