重要选择器querySelector和querySelectorAll

2016-05-16 23:15 流浪的诗人阅读(1100) 评论(0) 编辑收藏举报

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

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

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

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

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

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

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

document.getElementsByClassName('red')
//or
document.querySelector('.red')
//or
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>