选择所有元素 JavaScript

在 JavaScript 中，选择所有元素是一项常见的任务。通过使用不同的选择器，可以轻松地选择网页中的多个元素并对其进行操作。本文将介绍一些常用的方式来选择所有元素，并提供相应的代码示例。

1. 使用 querySelectorAll 方法

querySelectorAll 方法允许使用 CSS 选择器来选择与指定选择器匹配的所有元素。返回的是一个 NodeList 对象，它类似于数组，但不能使用数组的方法。

const elements = document.querySelectorAll('*');

以上代码将选择所有元素，并将它们存储在 elements 变量中。可以根据需要更改选择器，以选择某一特定类型的元素，比如所有 <div> 元素：

const divElements = document.querySelectorAll('div');

2. 使用 getElementsByTagName 方法

getElementsByTagName 方法根据元素的标签名称选择元素。返回的是一个包含指定标签名称的元素集合的 HTMLCollection 对象。

const elements = document.getElementsByTagName('*');

以上代码将选择所有元素，并将它们存储在 elements 变量中。

3. 使用 getElementsByClassName 方法

getElementsByClassName 方法根据元素的类名选择元素。返回的是一个包含指定类名的元素集合的 HTMLCollection 对象。

const elements = document.getElementsByClassName('className');

以上代码将选择所有具有指定类名的元素，并将它们存储在 elements 变量中。需要将 'className' 替换为实际的类名。

4. 使用 querySelectorAll 与伪类选择器

querySelectorAll 还支持使用伪类选择器。下面的示例选择所有隐藏的元素：

const hiddenElements = document.querySelectorAll('*:hidden');

5. 使用 querySelectorAll 与多个选择器

querySelectorAll 还支持使用多个选择器。下面的示例选择所有 <div> 和 <p> 元素：

const divAndParagraphElements = document.querySelectorAll('div, p');

通过使用不同的选择器和方法，你可以轻松地选择网页中的多个元素。根据具体情况选择最适合的方法，并享受 JavaScript 编程的乐趣！

参考文档：

• Document.querySelectorAll()
• Document.getElementsByTagName()
• Document.getElementsByClassName()