原生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速度快，缺点是IE六、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>