他们的作用是根据 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>