原生JS强大DOM选择器querySelector与querySelectorAll

在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。

querySelector 和 querySelectorAll 的使用非常的简单，就像标题说到的一样，它和 CSS 的写法完全一样，对于前端开发人员来说，这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV，为了获取到这个元素，你也许会像下面这样：

document.getElementById("test");

现在我们来试试使用新方法来获取这个 DIV：

document.querySelector("#test");
document.querySelectorAll("#test")[0];

感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。

例如：

html代码：

<div class="emphasis">我是内容</div>
<div class="emphasis">我是内容</div>
<div class="emphasis">我是内容</div>
<div class="emphasis">我是内容</div>

js代码：

var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
    emphasisText[i].style.fontWeight = "bold";
}

结果如图：

这是原生方法，比起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 matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. （返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）

这在BaseElement 为document的时候，没有什么问题，各浏览器的实现基本一致；但是，当BaseElement 为一个普通的dom Node的时候（支持这两个方法的dom Node ），浏览器的实现就有点奇怪了，举个例子：

<div class="test"  id="testId" >
    <p><span>Test</span></p>
</div>

<script type="text/javascript">
var   testElement= document.getElementById( 'testId' );
var   element = testElement.querySelector( '.test span' );
var   elementList = document.querySelectorAll( '.test span' );
console.log(element);  // <span>Test</span>
console.log(elementList);  // [span]
</script>

按照W3C的来理解，这个例子应该返回：element：null；elementList：[];因为作为baseElement的 testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！

如果每次都这么长的选择器感觉比较麻烦，那么可以这样优化代码：

var query = function(selector){
    return document.querySelector(selector);
};

调用方式：

var o = query("#shareOverlay");
o.style.zIndex = 80;
o.className = "overlay overlay-show";

html代码：

<div id="shareOverlay"></div>

得到的结果：

<div id="shareOverlay" class="overlay overlay-show" style="z-index: 80;"></div>