原生的强大选择器.docxVIP

在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。querySelector 和 querySelectorAll 的使用非常的简单，就像标题说到的一样，它和 CSS 的写法完全一样，对于前端开发人员来说，这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV，为了获取到这个元素，你也许会像下面这样：view sourceprint?1document.getElementById(test);现在我们来试试使用新方法来获取这个 DIV：view sourceprint?1document.querySelector(#test); 2document.querySelectorAll(#test)[0];下面是个小演示：我是 id 为 test 的 div感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子，我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。view sourceprint?1document.querySelector(div.testp:first-child); 2document.querySelectorAll(div.testp:first-child)[0];下面是个小演示：我是层里的 p 标签现在应该对于 querySelector、querySelectorAll 方法中的参数已经非常明白了，是的，它接收的参数和 CSS 选择器完全一致。querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。在本文最后一个例子中，我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。view sourceprint?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 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的时候，没有什么问题，各浏览器的实现基本一致