码迷,mamicode.com
首页 > 其他好文 > 详细

高级选择器querySelector和querySelectorAll

时间:2015-09-07 14:25:47      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

浏览器兼容性

技术分享 技术分享 技术分享 技术分享 技术分享
4.0+  3.5+ 8+  10.0+ 3.1+

高级选择器querySelector和querySelectorAll

标签:

原文地址:http://www.cnblogs.com/yangzhinian/p/4786397.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!