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. iOS segue 跳转

    场景描述: 要实现在tableViewController 的界面A里,点击一个cell ,跳转到第二个viewController的界面B .在第二个界面里做相应操作. 我的做法,利用sb,在A 里 ...

  2. 从个人的角度谈谈本次GNTC大会的收获

    GNTC资料:from sdnlab 从个人的角度谈谈本次大会的收获 从本次大会的主题演讲来看,目前SDN.NFV的最前沿已经不再像五年前持观望态度以及探讨,各大运营商.各大厂商已经将SDN.NFV具 ...

  3. 下载、运行docker

    Get the Linux binary To download the latest version for Linux, use the following URLs: https://get.d ...

  4. thinkphp的save方法失败

    如果用下面的方式更新数据时, $data['link_phone'] = I('post.link_phone'); $flag1 = $order->save ($data); $data一定 ...

  5. oracle EBS 资产定义

    一.资产定义也就是江项目任务上的特定(能生成资产的)物料按照一定格式生成资产信息,其中每个独立物料生成一条资产,具体操作步骤如下: 1.省本部库存超级用户系统内生成领料单.审批领料单.最后进行出库处理 ...

  6. 用户登录验证例题用的ajax

    1.登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. 【Java IO】FileInputStream 和 FileOutputStream

    class FileInputStream extends  InputStream implements Closeable

  8. jdk 8 lambda表达式 及在Android Studio的使用示例

    以前觉得java让人觉得有趣的一个特点是支持:匿名内部类,而最近发现jdk8已支持lambda并有更简便的方式,来实现匿名内部类. 这会让程序员更舒服,更喜欢java. 多年前觉得java语法和C#语 ...

  9. angularJS自定义属性作为条件中转

    <html> <head> <meta charset="utf-8"/> <title></title> </h ...

  10. There has been an error processing your request magento

    如果使用magento的过程中,出现以下页面: 说明出现了错误,但是亲,不用紧张,请根据"Error record number:xxxxxxxxx"的数字在网站根目录下的var/ ...