高级选择器querySelector和querySelectorAll

Javascript新提供的querySelector和querySelectorAll方法，是仿照CSS选择器功能编写的

 

querySelector

功能：该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素，如例：

<div>
    <div>
        <div>
            <p>第三层</p>
        </div>
        <p>第二层</p>
    </div>
    <p>第一层</p>
</div>
<script type="text/javascript">
    var P = document.querySelector('p'); //结果：<p>第三层</p>
</script>

 

querySelectorAll

功能：该方法返回所有满足条件的元素，结果是节点集合，查找规则与querySelector方法一样，如例：

<div>
    <div>
        <div>
            <p>第三层</p>
        </div>
        <p>第二层</p>
    </div>
    <p>第一层</p>
</div>
<script type="text/javascript">
    var P = document.querySelectorAll('p'); //选中顺序：<p>第三层</p> <p>第二层</p> <p>第一层</p>
</script>

 

选择器格式支持

选择器的书写方式和jQuery完全相同，在性能上，jquerySelector/jquerySelectorAll比jQuery相应选择器的性能更好，不过jquerySelector/jquerySelectorAll只兼顾了jQuery选择器的一部分功能。

选择器格式	功能描述
*	匹配所有元素
element	根据给定的元素名匹配所有元素
#id	根据给定的ID匹配一个元素
.class	根据给定的类匹配元素
selector, selector	将每一个选择器匹配到的元素合并后一起返回
ancestor descendant	在给定的祖先元素下匹配所有的后代元素
parent>child	在给定的父元素下匹配所有的子元素
prev+next	匹配所有在 prev 元素后的相邻next 元素
prev~siblings	匹配 prev 元素之后的所有 siblings 元素
[attribute]	匹配包含给定属性的元素
[attribute=value]	匹配给定的属性是某个特定值的元素
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素
[attribute][attribute]	复合属性选择器，需要同时满足多个条件时使用

注意：不支持所有的冒号选择器(类似:first-child)以及[attribute!=value]属性选择器

 

浏览器兼容性

4.0+	3.5+	8+	10.0+	3.1+