JS原生的强大DOM选择器querySelector

在传统的JavaScript 开发中，查找DOM 往往是开发人员遇到的第一个头疼的问题，原生的JavaScript 所提供的DOM 选择方法并不多，仅仅局限于通过tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。

事实上，现在所有的浏览器厂商都提供了querySelector 和querySelectorAll 这两个方法的支持，甚至就连微软也派出了IE 8 作为支持这一特性的代表，querySelector 和querySelectorAll 作为查找DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用CSS 选择器一样快速地查找到你需要的节点。

querySelector 和 querySelectorAll 的使用非常的简单，就像标题说到的一样，它和CSS 的写法完全一样，对于前端开发人员来说，这是难度几乎为零的一次学习。

假如我们有一个id 为test 的DIV，为了获取到这个元素，你也许会像下面这样：
view source
print?
1document.getElementById("test");
现在我们来试试使用新方法来获取这个DIV：
view source
print?
1document.querySelector("#test");
2document.querySelectorAll("#test")[0];
下面是个小演示：
我是id 为test 的 div
感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候querySelector 和querySelectorAll 的优势就发挥出来了。

比如接下来这个例子，我们将在document 中选取class 为test 的 div 的子元素p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。

1document.querySelector("div.test>p:first-child");
2document.querySelectorAll("div.test>p:first-child")[0];
下面是个小演示：
我是层里的p 标签
现在应该对于querySelector、querySelectorAll 方法中的参数已经非常明白了，是的，它接收的参数和CSS 选择器完全一致。

querySelector 和querySelectorAll 的区别在于querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。

querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回Null。

querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。

在本文最后一个例子中，我们使用querySelectorAll 给所有class 为emphasis 的元素加粗显示。

view source
print?
1varemphasisText = document.querySelectorAll(".emphasis");
2for( vari = 0 , j = emphasisText.length ; i < j ; i++ ){
3 emphasisText[i].style.fontWeight = "bold";
4}
这是原生方法，比起jquery速度快，缺点是IE6、7不支持。

W3C的规范与库中的实现
querySelector：return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null .（返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null）
querySelectorAll：return a NodeList containing all of the m atching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the m ethod must return an empty NodeList. （返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）
这在BaseElement 为document的时候，没有什么问题，各浏览器的实现基本一致；但是，当BaseElement 为一个普通的dom Node的时候（支持这两个方法的dom Node ），浏览器的实现就有点奇怪了，举个例子：
view source
print?
01<div class= "test"id= "testId">
02 <p><span>Test</span></p>
03</div>
04<script type= "text/javascript">
05 var testElement= document.getElementById( 'testId');
06 var element = testElement.querySelector( '.test span');
07 var elementList = document.querySelectorAll( '.test span');
08 console.log(element); // <span>Test</span>
09 console.log(elementList); // 1
10</script>
按照W3C的来理解，这个例子应该返回：elem ent：null；elementList：[];因为作为baseElement 的testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！
人的智慧总是无穷的，Andrew Dupont发明了一种方法暂时修正了这个怪问题，就是在selectors前面指定baseElement的id，限制匹配的范围；这个方法被广泛的应用在各大流行框架中；
Jquery的实现：
view source
print?
1var oldContext = context,
2old = context.getAttribute( "id"),
3nid = old || id,
01try{
02 if( !relativeHierarchySelector || hasParent ) {
03 return makeArray( context.querySelectorAll( "[id='"+ nid + "'] "+ query ), extra );
04 }
05}
06catch(pseudoError) {}
07finally {
08 if( !old ) {
09 oldContext.removeAttribute( "id");
10 }
11}
先不看这点代码中其他的地方，只看他如何实现这个方法的；这点代码是JQuery1.6的片段；当baseElement没有ID的时候，给他设置一个id = "__sizzle__”，然后再使用的时候加在selectors的前面，做到范围限制；context.querySelectorAll( "[id='" + nid + "'] " + query ；最后，因为这个ID本身不是baseElement应该有的，所以，还需要移除：oldContext.removeAttribute( "id" ); ，Mootools的实现：
view source
print?
1var currentId = _context.getAttribute( 'id'), slickid = 'slickid__';
2_context.setAttribute( 'id', slickid);
3_expression = '#'+ slickid + ' '+ _expression;
4context = _context.parentNode;
Mootools和J query类似：只不过slickid = 'slickid__'；其实意义是一样的；方法兼容性：
FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;IE 8 ：不支持baseElement为object；
querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。

请看下面的例子：
//获取body元素
var body = document.querySelector("body");
//获取ID为myDiv的元素
var myDiv = document.querySelecotr("#myDiv");
//获取第一个包含类selected的元素
var selected = document.querySelector(".selected");
//获取第一个包含类button的图像元素
var img = document.body.querySelector("img.button");
当querySelector()方法应用Document类型上时，它会尝试从文档元素开始匹配模式。

如果应用与Element类型，查询则只会尝试从该元素的子孙节点中寻找匹配。

CSS查询可以根据需要复杂化或简单化。

如果查询中有语法错误或者有不支持选择器，那么querySelector()或抛出一个错误。

querySelector()方法还接受可选的第二个参数，它是一个命名空间解析器，就是一个接受一个命名空间前缀并返回其相关URI的函数，类似于：
var nsresolver = function (prefix) {
switch (prefix) {
case "w3cmm":
return "";
//此处其它代码
}
}；
命名空间解析器对于在嵌入了其它语言诸如SVG或MathML的XHTML文档中执行查询非常有用，XML文档亦如此。

CSS查询中的命名空间是使用一个管道来指定的，如下：
var svgImage = document.querySelector("svg|svg", function (prefix) { switch (prefix) {
case :"svg":
return "http://www.w3.rog/2000/svg";
}
});
这个例子通过在文档中查找定义为<svg:svg>的元素返回了第一个SVG图像。

当在查询中遇到了svg命名空间前缀时，则调用命名空间解析器函数来确定URI。

没有命名空间解析器，则会抛出一个错误，因为查询引擎无法辨识svg命名空间前缀。