JavaScript DOM 操作：document.querySelectorAll() 方法详解

document.querySelectorAll() 是一个 JavaScript DOM 方法，用于返回文档中匹配指定 CSS 选择器的所有元素的列表。

该方法接受一个 CSS 选择器字符串作为参数，并返回一个 NodeList 对象，其中包含所有匹配该选择器的元素。NodeList 对象类似于数组，但它不是真正的数组，因此无法使用数组方法（如 map、filter 等）。

例如：

const allParagraphs = document.querySelectorAll('p'); // 选择所有 <p> 元素
const firstLink = document.querySelectorAll('a')[0]; // 选择第一个 <a> 元素

注意：

• 如果没有匹配到任何元素，则返回的 NodeList 对象为空。
• 该方法返回的是一个静态的 NodeList 对象，这意味着即使 DOM 结构发生改变，它也不会更新。

与 document.querySelector() 的区别：

document.querySelector() 方法仅返回匹配第一个 CSS 选择器的元素，而 document.querySelectorAll() 方法返回所有匹配的元素。

使用场景：

document.querySelectorAll() 方法常用于：

• 选择页面中的特定元素
• 对多个元素进行操作
• 获取页面元素的集合

示例代码：

// 获取所有 <p> 元素，并改变其背景颜色
const paragraphs = document.querySelectorAll('p');
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.backgroundColor = 'yellow';
}

// 获取所有带有 class 属性 'highlight' 的元素，并添加一个事件监听器
const highlightedElements = document.querySelectorAll('.highlight');
for (let i = 0; i < highlightedElements.length; i++) {
  highlightedElements[i].addEventListener('click', function() {
    console.log('你点击了元素：', this);
  });
}

通过以上示例，您可以更好地理解 document.querySelectorAll() 方法的用法。如果您需要进一步了解 DOM 操作，请参考相关文档或教程。