强大DOM选择器querySelector

今天碰到问题，用了下不经常用的querySelector还不错

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

document.getElementById("test");

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

document.querySelector("#test");

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

感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子，我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。

document.querySelector("div.test>p:first-child");

document.querySelectorAll("div.test>p:first-child")[0];


var emphasisText = document.querySelectorAll(".emphasis");

for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){

    emphasisText[i].style.fontWeight = "bold";

}

缺点：这是原生方法，比起jquery速度快，缺点是IE6、7不支持。