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+ |
来源:https://www.cnblogs.com/yangzhinian/p/4786397.html