querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素。
目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
描述:
1、querySelector() 根据指定的选择规则,返回在页面中找到的第一个匹配元素
2、querySelectorAll() 根据指定的规则返回页面中所有相匹配的元素。
//选择文档中文类名为highClass或者lowClass的第一个元素
Var x=document.querySelector(".highClass",".lowClass");
1、对于querySelector()来说是满足规则中的任意一个条件的第一个元素。
2、对于querySelectorAll()来说,页面中的元素只要满足规则中的任意一个条件,都会被返回。
区别点:
1、querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。
2、querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身
实例:
<div id="test1"><a href="http://www.hujuntao.com/">设计蜂巢</a></div>
<p id="bar">111</p>
<script>
var d1 = document.getElementById('test1'),
obj1 = d1.querySelector('div a'),
obj2 = d1.querySelectorAll('div a');
obj3 = $(d1).find('div a');
console.log(obj1)//<a href="http://www.hujuntao.com/">设计蜂巢</a>
console.log(obj2.length)//1
console.log(obj3)//null
</script>