高级选择器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+ |
高级选择器querySelector和querySelectorAll的更多相关文章
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- javascript高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- 重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...
- 强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- HTML5中类jQuery选择器querySelector和querySelectorAll的使用
支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...
随机推荐
- maven资源文件的相关配置
构建Maven项目的时候,如果没有进行特殊的配置,Maven会按照标准的目录结构查找和处理各种类型文件. src/main/java和src/test/java 这两个目录中的所有*.java文件会 ...
- twitter storm源码走读之2 -- tuple消息发送场景分析
欢迎转载,转载请注明出处源自徽沪一郎.本文尝试分析tuple发送时的具体细节,本博的另一篇文章<bolt消息传递路径之源码解读>主要从消息接收方面来阐述问题,两篇文章互为补充. worke ...
- service mongod start start: Unknown job: mongod问题
终于解决了这个异常蛋疼的问题,当安装完毕mongodb的时候,执行: root@ubuntu:/usr/local# service mongod start 出现: start: Unknown j ...
- mysql执行完select后,释放游标
内存释放 在我们执行完SELECT语句后,释放游标内存是一个很好的习惯. .可以通过PHP函数mysql_free_result()来实现内存的释放. 以下实例演示了该函数的使用方法. 2.mysql ...
- Yii源码阅读笔记(十五)
Model类,集中整个应用的数据和业务逻辑——验证 /** * Returns the attribute labels. * 返回属性的标签 * * Attribute labels are mai ...
- Unity 中 使用c#线程
使用条件 天下没有免费的午餐,在我使用unity的那一刻,我就感觉到不自在,因为开源所以不知道底层实现,如果只是简单的做点简单游戏,那就无所谓的了,但真正用到实际地方的时候,就会发现一个挨着一个坑 ...
- ExtJS笔记2 Class System
For the first time in its history, Ext JS went through a huge refactoring from the ground up with th ...
- HTML: 字體設置
針對 font-family 屬性進行詳細設置, 首先我們要瞭解,字體分類: ①無襯線字體: san-serif,一般用於文章標題 ②有襯線字體: serif,一般用在段落處或者非標題部分 當我們設置 ...
- buffer overflow vulnerabilitie
Computer Systems A Programmer's Perspective Second Edition Avoiding security holes.For many years,bu ...
- OpenMP for Fortran
OpenMP for Fortran OpenMP Directive Syntax of OpenMP compiler directive for Fortran: !$OMP Directive ...