javascript选择器querySelector和querySelectorAll的使用和区别

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

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

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

module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
};
Document implements NodeSelector;
DocumentFragment implements NodeSelector;
Element implements NodeSelector;
};

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

获取ID为abc的元素：

1 document.getElementById('abc');
2 //or
3 document.querySelector('#abc');
4 //or
5 document.querySelectorAll('#abc')[0];

获取class为abc的元素：

1 document.getElementByClassName('abc');
2 //or
3 document.querySelector('.abc');
4 //or
5 document.querySelectorAll('.abc')[0];

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

 1 <body>
 2 <div id="test1"><a href="#">abc</a></div>
 3 <p id="bar">111</p>
 4 <script>
 5     var d1 = document.getElementById('test1'),
 6     obj1 = d1.querySelector('div a'),
 7     obj2 = d1.querySelectorAll('div a');
 8     obj3 = $(d1).find('div a');
 9     console.log(obj1)//<a href="#">abc</a>
10     console.log(obj2.length)//1
11     console.log(obj3)//null
12 </script>
13 //querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
14 //jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身
15 </body>

误解就在于对d1.querySelectorAll('div a')的实现理解，不少人一开始几乎都认为是直接从div[id='test']的孩子中进行查找，实际上它还是根据selector string先从整个document上查找，再返回属于div[id='test']的子节点。很多人会疑惑，那么为什么不按照直接按父节点找子节点的方式来实现呢？就像elem.getElementsByTagName。

querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
并且返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。