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

重要选择器querySelector和querySelectorAll

时间:2016-05-17 00:40:06      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

querySelector 和 querySelectorAll 在规范中定义了如下接口:

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。

获取页面I属性D为test的元素:

  1. document.getElementById("test");
  2. //or
  3. document.querySelector("#test");
  4. document.querySelectorAll("#test")[0];

获取页面class属性为”red”的元素:

  1. document.getElementsByClassName(‘red‘)
  2. //or
  3. document.querySelector(‘.red‘)
  4. //or
  5. document.querySelectorAll(‘.red‘)

Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别:

<!DOCTYPE html>
<html>
<head>
    <title>querySelector,querySelectorAll</title>
    <meta charset="utf-8">
    <script src="http://r.aicaicdn.com/js/public/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="test1">
        <span>设计蜂巢1</span>
        <span>设计蜂巢2</span>
        <span>设计蜂巢3</span>
    </div>
    <p id="bar">111</p>
</body>
</html>

<script>
    var d1 = document.getElementById(test1),
    obj1 = d1.querySelector(span),
    obj2 = d1.querySelectorAll(span);
    obj3 = $("#test1").find(span);
    console.log(obj1)//返回一个对象,如<span>设计蜂巢1</span>
    console.log(obj2);//返回一个集合或数组,如[span, span, span]
    console.log(obj2.length)//1
    console.log(obj3)//[span, span, span, prevObject: b.fn.b.init[1], context: document, selector: "#test1 span"]
</script>

 

重要选择器querySelector和querySelectorAll

标签:

原文地址:http://www.cnblogs.com/wdlhao/p/5499931.html

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