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结构的改变不会影响到之前取到的结果。