首页document.querySelectorAll（）如何使用

document.querySelectorAll（）如何使用

时间: 2025-01-25 21:06:12 浏览: 56

### document.querySelectorAll 使用教程 #### 语法解释 `document.querySelectorAll('css选择器')` 方法依据给定的选择器返回所有匹配的元素对象列表。此方法接收一个参数，即 CSS 选择器字符串，可以是标签名、类名、ID 或者更复杂的组合选择器[^1]。当调用 `querySelectorAll()` 并未发现符合条件的元素时，该函数不会抛出错误而是返回一个空的 NodeList 对象[^2]。 #### 示例代码下面是一些具体的例子来展示如何使用这个强大的 DOM 查询工具：查询页面上所有的 `<p>` 标签并改变它们的颜色： ```javascript let paragraphs = document.querySelectorAll('p'); paragraphs.forEach(function(item){ item.style.color = 'blue'; }); ``` 选取具有特定类 `.special-class` 的所有元素并将这些元素隐藏起来： ```javascript let specialElements = document.querySelectorAll('.special-class'); specialElements.forEach(element => element.style.display = "none"); ``` 获取 ID 为 `unique-id` 的单一元素（尽管这里只会有唯一的结果，但仍然会作为 NodeList 返回）： ```javascript let uniqueElement = document.querySelectorAll('#unique-id')[0]; if (uniqueElement) { console.log(uniqueElement); } ``` 注意，在最后一个例子中，虽然预期只有一个元素被选中，但是由于 `querySelectorAll` 总是返回 NodeList 类型的数据结构，因此需要通过索引来访问实际的目标元素。

阅读全文