使用 CSS 选择器

querySelectorAll - 类似于jQuery提供的CSS选择器方法

---

querySelectorAll() 返回一个和 CSS 选择器匹配的 DOM 元素列表，如果你以前用过 jQuery 去选择一个元素，你一定用过这个方法：

var matches = document.querySelectorAll('div.foo');

for (i=0; i<matches.length; i++)
  console.log(matches[i].innerHTML);
      

在上面的例子中，获取了所有类名为 foo 并且标签为 div 的 NodeList, 如果没有匹配到元素则会返回一个空的 NoseList, 该方法基本上适用于任何CSS选择器, 与jQuery的$（...）方法非常相似. 浏览器兼容性很好. IE 8仅限于使用CSS 2.1选择器，并且存在一些无法识别的HTML5标签的问题。 其他示例：

// select all div tags + link tags with the class "info"
var matches = document.querySelectorAll("div, a.info");

// select all text input fields
var matches = document.querySelectorAll("input[type='text']");
      

如上，这正是jQuery的选择器引擎为您所做的-不仅速度更快而且无需额外的库。与 jQuery 的不同之处是，querySelector() 返回一个节点列表

此外，还有一种甚至更快的方法可用于仅提取第一个匹配元素:

var match = document.querySelector('div.foo');

// equals for the matched element
var match = document.querySelectorAll('div.foo')[0];
      

querySelectorAll() and querySelector() are great, just not to type. So, simply create your own helper functions:

// select a list of matching elements, context is optional
function $(selector, context) {
    return (context || document).querySelectorAll(selector);
}

// select the first match only, context is optional
function $1(selector, context) {
    return (context || document).querySelector(selector);
}


// how to use

// select all '.bar' elements inside all '.foo' containers
var matches = $('.foo .bar');

// context example
var container = $1('.foo');
// select '.bar' elements inside this one container
var matches = $('.bar', container);
      

这样, 您可以像使用jQuery一样使用$（...）来获取元素;您甚至可以传递上下文元素. jQuery文档提供了可用选择器的完整列表. Warning: jQuery的扩展选择器不是CSS规范的一部分, 因此不适用于QuerySelectorAll().