重要选择器querySelector和querySelectorAll

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重要选择器querySelector和querySelectorAll相关的知识，希望对你有一定的参考价值。

他们的作用是根据 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的主要内容，如果未能解决你的问题，请参考以下文章

document.querySelector()方法document.querySelectorA()

document.querySelector()和document.querySelectorAll()

querySelector与getElementBy的区别

JS选择器querySelector和~All，三个原生选择器

querySelector选择器

js高级选择器querySelector和querySelectorAll