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的更多相关文章

  1. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  2. javascript高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  3. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  4. 重要选择器querySelector和querySelectorAll

    他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...

  5. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  6. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  7. 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

    querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...

  8. 原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  9. HTML5中类jQuery选择器querySelector和querySelectorAll的使用

    支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...

随机推荐

  1. maven资源文件的相关配置

    构建Maven项目的时候,如果没有进行特殊的配置,Maven会按照标准的目录结构查找和处理各种类型文件. src/main/java和src/test/java  这两个目录中的所有*.java文件会 ...

  2. twitter storm源码走读之2 -- tuple消息发送场景分析

    欢迎转载,转载请注明出处源自徽沪一郎.本文尝试分析tuple发送时的具体细节,本博的另一篇文章<bolt消息传递路径之源码解读>主要从消息接收方面来阐述问题,两篇文章互为补充. worke ...

  3. service mongod start start: Unknown job: mongod问题

    终于解决了这个异常蛋疼的问题,当安装完毕mongodb的时候,执行: root@ubuntu:/usr/local# service mongod start 出现: start: Unknown j ...

  4. mysql执行完select后,释放游标

    内存释放 在我们执行完SELECT语句后,释放游标内存是一个很好的习惯. .可以通过PHP函数mysql_free_result()来实现内存的释放. 以下实例演示了该函数的使用方法. 2.mysql ...

  5. Yii源码阅读笔记(十五)

    Model类,集中整个应用的数据和业务逻辑——验证 /** * Returns the attribute labels. * 返回属性的标签 * * Attribute labels are mai ...

  6. Unity 中 使用c#线程

    使用条件   天下没有免费的午餐,在我使用unity的那一刻,我就感觉到不自在,因为开源所以不知道底层实现,如果只是简单的做点简单游戏,那就无所谓的了,但真正用到实际地方的时候,就会发现一个挨着一个坑 ...

  7. ExtJS笔记2 Class System

    For the first time in its history, Ext JS went through a huge refactoring from the ground up with th ...

  8. HTML: 字體設置

    針對 font-family 屬性進行詳細設置, 首先我們要瞭解,字體分類: ①無襯線字體: san-serif,一般用於文章標題 ②有襯線字體: serif,一般用在段落處或者非標題部分 當我們設置 ...

  9. buffer overflow vulnerabilitie

    Computer Systems A Programmer's Perspective Second Edition Avoiding security holes.For many years,bu ...

  10. OpenMP for Fortran

    OpenMP for Fortran OpenMP Directive Syntax of OpenMP compiler directive for Fortran: !$OMP Directive ...