📌  相关文章
📜  HTML | DOM querySelectorAll() 方法(1)

📅  最后修改于: 2023-12-03 15:31:12.476000             🧑  作者: Mango

HTML | DOM querySelectorAll() 方法

简介

querySelectorAll() 方法是 Document 对象的方法，它返回文档中与指定 CSS 选择器匹配的所有元素。

该方法返回的是一个 NodeList 对象，它是一个类数组对象，它包含了匹配元素的列表。

与 querySelector() 方法不同，querySelectorAll() 方法返回的是 NodeList 对象而不是 Element 对象。

语法

querySelectorAll() 方法的语法如下：

elementList = document.querySelectorAll(selectors);

其中，

  • elementList：存放匹配元素对象的 NodeList 对象。
  • selectors：CSS 样式选择器，可以是多个选择器，并用逗号隔开。
示例

以下是一个用于演示 querySelectorAll() 方法的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>querySelectorAll() 方法演示</title>
</head>
<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<script>
		var liElements = document.querySelectorAll('#list li');
		for (var i = 0; i < liElements.length; i++) {
			console.log(liElements[i].innerHTML);
		}
	</script>
</body>
</html>

在上述代码中，我们使用了一个 CSS 选择器 #list li 来选取 HTML 中 ID 属性为 list 的 ul 元素下的所有 li 元素。然后，我们将选取到的 li 元素遍历输出它们的 innerHTML 属性值。

运行上述代码，我们可以在浏览器控制台中输出以下结果：

HTML
CSS
JavaScript
注意事项
  1. NodeList 对象并不是 Array 类型，它是一个类数组对象，它没有数组对象的一些方法，如：push()、pop()、slice() 等等。如果需要使用这些方法，则需要将 NodeList 对象转换为数组对象，具体方法可以参考 NodeList 对象转换数组对象。
  2. 如果选择器选择到了多个元素，则返回 NodeList 对象，否则返回单个 Element 对象。如果想要指定元素对象，则需要使用 querySelector() 方法。
  3. querySelectorAll() 方法对性能的影响较大，因为它需要扫描整个文档来搜索匹配的元素，所以不推荐使用过于复杂的选择器。
  4. 如果选择器使用的是类选择器或标签选择器，则将会返回元素的一个实时快照。它们不会随着文档的变化而更新。
  5. 如果选择器使用的是 ID 选择器，则只会匹配一个元素。