[转帖]querySelector & querySelectorAll --- 像CSS一样选择DOM

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

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

Js代码

document.getElementById("test");

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

Js代码

document.querySelector("#test");

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

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

Js代码

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

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

现在应该对于querySelector、querySelectorAll方法中的参数已经非常明白了，是的，它接收的参数和CSS选择器完全一致。querySelector和querySelectorAll的区别在于querySelector用来获取一个元素，而querySelectorAll可以获取多个元素。querySelector将返回匹配到的第一个元素，如果没有匹配的元素则返回Null。querySelectorAll返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。在本文最后一个例子中，我们使用querySelectorAll给所有class为emphasis的元素加粗显示。

Js代码

varemphasisText=document.querySelectorAll(".emphasis");

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

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

}

[转自:http://cheneyjuu.blog.163.com/blog/static/4191764020106132415974/]