JavaScript HTML DOM querySelectorAll() 方法

• 

  HTML DOM querySelectorAll() 方法

  document.querySelectorAll()方法返回文档中与指定的CSS选择器匹配的所有元素，作为静态NodeList对象。NodeList对象表示节点的集合。可以通过索引号访问节点。索引从0开始。

  提示：您可以使用NodeList对象的length属性来确定与指定选择器匹配的元素数，然后您可以遍历所有元素并提取所需的信息。

  有关CSS选择器的更多信息，请访问我们的 CSS选择器教程和CSS选择器参考。

  实例：

  获取文档中的所有使用class=“example”的元素：

  document.querySelectorAll(".example");
  

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  方法
  querySelectorAll()	9.0+	4.0+	3.5+	3.2+	10.0+

• 

  语法

  document.querySelectorAll(CSS selectors)
• 

  参数值

  参数	类型	描述
  CSS selectors	String	必需的。 指定一个或多个与元素匹配的CSS选择器。 这些用于根据ID元素，类，类型，属性，属性值等选择HTML元素。对于多个选择器，使用逗号分隔每个选择器。 返回的元素取决于首先在文档中找到的元素（请参阅“更多示例”）。提示：有关所有CSS选择器的列表，请查看我们的CSS选择器参考。

• 

  技术细节

  项目	描述
  返回值：	NodeList对象，表示与指定的CSS选择器匹配的第一个元素。如果未找到匹配项，则返回null。如果指定的选择器无效，则抛出SYNTAX_ERR异常。
  DOM版本	Core Level 1

• 

  更多例子

  获取文档中的所有<p>元素，并设置第一个<p>元素（索引0）的背景颜色：

  // 在文档中获取所有 <p> 元素
  var x = document.querySelectorAll("p"); 
  
  // 设置第一个<p>元素的背景颜色
  x[0].style.backgroundColor = "red"; 
  

  尝试一下

  使用class=“example”获取文档中的所有<p>元素，并设置第一个<p>元素的背景：

  // 使用class=“example”获取文档中的所有<p>元素
  var x = document.querySelectorAll("p.example"); 
  
  // 使用class =“example”（索引0）设置第一个<p>元素的背景颜色
  x[0].style.backgroundColor = "red"; 
  

  尝试一下

  找出文档中有class=“example”的元素数量（使用NodeList对象的length属性）：

  var x = document.querySelectorAll(".example").length;
  

  尝试一下

  使用class=“example”设置文档中所有元素的背景颜色：

  var x = document.querySelectorAll(".example");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
  }
  

  尝试一下
• 

  相关页面

  CSS 教程 CSS 选择器

  CSS 参考 CSS 选择器参考

  JavaScript 教程 JavaScript HTML DOM节点列表