DOM扩展

对DOM的两个主要的扩展是Selectors API (选择符 API) 和HTML5。这两个扩展都源自开发社区，而将某些常见做法及API标准化一直是众望所归。

1.选择符API

Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。
Selectors APILevel1 的核心是两个方法:querySelector()和querySelectorAll()。在兼容的浏览器中，可以通过Document及Element类型的实例调用它们。

1.1querySelector()方法

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')

1.2querySelectorAll()方法

querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个css选择符，
但返回的是所有元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。
只要传给querySelectorAll()方法的css选择符有效，该方法都会返回一个NodeList对象，而不管找到多少匹配的元素。如果没有找到匹配的元素，NodeList就是空的。
能够调用querySelectorAll()方法的类型包括Document、DocumentFragment和Element。

//取得<div>中所有<em>元素(类似于getElementsByTagName("em"))
var  ems=document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds=document.querySelectorAll(".selected");
//取得所有<p>元素中所有<strong>元素
var strongs=document.querySelectorAll("p strong");

要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法，比如：

var i,len,strong;
for(i=0,len=strongs.length;i<len;i++){
strong=strongs[i]; //或者strongs.item(i)
strong.className="important";
}

###1.3matchesSelector()方法
Selectors API Level2规范为Element类型新增了一个方法matchesSelector()。这个方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。看例子。
if(document.body.matchesSelector("body.page1")){
//true
}
在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被querySelector()或querySelectorAll方法返回。

function matchesSelector(element,selector){
if(element.matchesSelector){
return element,matchesSelector(selector);
} else if(element.matchesSelector){
return element,matchesSelector(selector);
} else {
throw new Error("Not supported.")
}
}
if(matchesSelector(docment.body,"body.page1")){
//执行操作
}