DOM扩展-选择符API

选择符API允许直接使用CSS选择器来选取页面元素，众多库推进了选择符API的标准化。

选择符API性能因为原生，所以性能必定强于各个库同类型的查询操作。

querySelector()

1. Selector API Level 1;

2. 接收一个css选择符（可复杂）,返回匹配的第一个元素或返回null;

3. 传入不支持的选择符会抛出错误；

4. 能调用querySelector()的对象为：Document类型，Element类型，DocumentFragment类型。

querySelectorAll()

1. Selector API Level 1;
2. 接收一个CSS选择符（可复杂），返回所有匹配元素组成的NodeList实例或null;
3. 传入不支持的选择符会抛出错误；
4. 能调用querySelector()的对象为：Document类型，Element类型，DocumentFragment类型。

matchesSelector()

1. Selector API Level 2;
2. 接收一个css选择器做参数，比较选择符与调用方法的元素是否匹配，返回布尔值；
3. 各个浏览器支持性不同：IE9+通过document.body.msMatchesSelector()支持该方法，Firefox3.6通过document.body.mozMatchesSelector()支持该方法，Safari5+和Chrome通过document.body.webkitMatchesSelector()支持该方法。下面是一个包装的函数：

function matchesSelector(element, selector){
    if(element.matchesSelector){
        return element.matchesSelector(selector);
    }else if(element.msMatchesSelector){
        return element.msMatchesSelector(selector);
    }else if(element.mozMatchesSelector){
        return element.mozMatchesSelector(selector);
    }else if(element.webkitMatchesSelector){
        return element.webkitMatchesSelector(selector);
    }else{
        throw new Error("Not supported.");
    }
}

if(matchesSelector(document.body, "body.page1")){
    //执行操作
}