一、选择符API
SelectorsAPILevel 1的核心是两个方法：querySelector()和querySelectorAll()。
1. querySelector()方法
querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。请看下面的例子：
//取得body元素
var body = document.querySelector(“body”)；
//取得ID为”myDiv”的元素
var myDiv = document.querySelector(“#myDiv”)；
//取得类为”selected”的第一个元素
var selected = document.querySelector(“.selected”)；
//取得类为”button”的第一个图像元素
var img = document.body.querySelector(“img.button”)；
2. querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但返回的是所有匹配的元素而不是一个元素。返回的值是带有属性和方法的NodeList，而其底层实现则类似于一组元素的快照。能够调用querySelectorAll()方法的类型包括：Document、DocumentFragment和Element。下面是几个例子：
//取得某<div>中的所有<em>元素
var ems = document.getElementById(“myDiv”).querySelectorAll(“em”);
//取得类为”selected”的所有元素
var selecteds = document.querySelectorAll(“.selected”);
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll(“p strong”);
3.matchesSelector()方法
Selectors API Level 2 规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则返回false。看例子：
if ( document.body.matchesSelector( “body.page1” ) ) {
//true
}
在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被querySelector()或querySelectorAll()方法返回。
二、元素遍历
Element Traversal API 为DOM元素添加以下5个属性：
childElementCount：返回子元素的个数。
firstElementChild：指向第一个子元素；firstChild的元素版。
lastElementChild：指向最后一个子元素；lastChild的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。
三、HTML5
1.与类相关的扩充：
①getElementsByClassName()方法
getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素NodeList。传入多个类名时，类名的先后顺序不重要。
②classList属性
在操作类名时，需要通过className属性添加、删除和替换类名。因为className中是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。这个新类型定义了如下方法：
add(value)：将给定的字符串值添加到表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
2.焦点管理
HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性。这个属性始终会引用DOM中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入和在代码中调用focus()方法。
document.hasFocus()方法用于确定文档是否获得了焦点。
3.HTMLDocument的变化
①readyState属性
Document的readyState属性有两个可能的值：
loading，正在加载文档；
complete，已经加载完文档。
使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。
②兼容模式
IE为document添加了一个名为compatMode的属性，这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。就像下面例子中所展示的那样，在标准模式下，
document.compatMode的值等于”CSS1Compat”，而在混杂模式下，document.compatMode的值等于”BackCompat”。
③head属性
作为document.body引用文档的<body>元素的补充，HTML5新增了document.head属性，引用文档的<head>元素。
4.字符集属性
①charset属性表示文档中实际使用的字符集，也可以用来指定新字符集。
②defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。
5.自定义数据属性
HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。
6.插入标记
①innerHTML属性
在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
②outerHTML属性
在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。下面是一个例子：
<div id=”content”>
<p>This is a<strong> paragraph </strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
如果在<div>元素上调用outerHTML，会返回与上面相同的代码，包括<div>本身。
③insertAdjacentHTML()方法
插入标记的最后一个新增方法是insertAdjacentHTML()方法。这个方法最早也是在IE中出现的，它接收两个参数：插入位置和要插入的HTML文本。第一个参数必须是下列值之一：
“beforebegin”，在当前元素之前插入一个紧邻的同辈元素；
“afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
“beforeend”，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
“afterend”，在当前元素之后插入一个紧邻的同辈元素。
7. scrollIntoView()方法
scrollIntoView()方法可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false作为参数，调用元素会尽可能全部出现在视口中，不过顶部不一定平齐。
四、专有扩展
1.文档模式
页面的文档模式决定了可以使用什么功能。
2.children属性
处理文本节点中的空白符，与childNodes没有什么区别，即在元素只包含子元素节点时，这两个属性的值相同。下面是访问children属性的示例代码：
var childCount = element.children.length ;
var firstChild = element.children[0];
3.contains()方法
在实际开发中，经常需要知道某个节点是不是另一个节点的后代，IE因此率先引入了contains()方法，以便不通过在DOM文档树中查找即可获得这个信息。
4.插入文本
innerText属性：
通过innerText属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过innerText写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。
outerText属性：
在读取文本值时，outerText与innerText的结果完全一样。但在写模式下，outerText就完全不同了：outerText不只是替换调用它的元素的子节点，而是会替换整个元素。
5.滚动
scrollIntoViewIfNeeded（alignCenter）：只在当前元素在视口中不可见的情况下。
scrollByLines（lineCount）：将元素的内容滚动指定的行高，lineCount值可以是正值，也可以是负值。
scrollByPages（pageCount）：将元素的内容滚动指定的页面高度，具体高度由元素对象的高度决定。
需要注意的是：scrollIntoView（）和scrollIntoViewIfNeeded（）的作用对象时元素的容器，而scrollByLines（）和scrollByPages（）影响的则是元素自身。