高级选择器querySelector和querySelectorAll

天大地大妈咪最大 提交于 2020-03-17 09:54:02

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+
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!