Javascript: querySelector仅选择1个div。如何让它选择具有相同类的所有div？

querySelector 方法在 JavaScript 中用于选择符合指定 CSS 选择器的第一个元素。如果你想要选择具有相同类的所有 div 元素，你应该使用 querySelectorAll 方法，而不是 querySelector。querySelectorAll 返回一个包含所有匹配元素的 NodeList。

以下是如何使用 querySelectorAll 来选择所有具有特定类的 div 元素的示例：

// 假设我们要选择所有类名为 'example-class' 的 div 元素
var divs = document.querySelectorAll('div.example-class');

// 现在 divs 是一个 NodeList，包含了所有匹配的 div 元素
divs.forEach(function(div) {
  // 对每个 div 元素执行操作，例如改变背景颜色
  div.style.backgroundColor = 'yellow';
});

在这个例子中，'div.example-class' 是一个 CSS 选择器，它匹配所有 div 元素，这些元素有一个类名为 example-class。

应用场景

这个方法在需要对页面上的一组元素执行相同的操作时非常有用，例如：

• 样式化一组元素
• 添加或移除事件监听器
• 修改元素的属性或内容

可能遇到的问题及解决方法

如果你在使用 querySelectorAll 时遇到问题，可能是以下原因：

1. 选择器错误：确保你的 CSS 选择器正确无误。错误的或过于宽泛的选择器可能导致选择到错误的元素或根本没有元素被选中。
2. 脚本执行时机：如果你的脚本在 DOM 完全加载之前执行，那么 querySelectorAll 可能找不到任何元素。确保你的脚本在文档加载完成后执行，可以通过将脚本放在文档底部或使用 DOMContentLoaded 事件来实现。

document.addEventListener('DOMContentLoaded', function() {
  var divs = document.querySelectorAll('div.example-class');
  // ... 对 divs 执行操作 ...
});

1. 样式或脚本冲突：如果页面上有其他脚本或样式表影响了元素的选择，可能会导致问题。检查是否有其他脚本修改了元素的类名或其他属性，这可能会影响选择器的匹配。

如果你遵循了上述建议，但仍然遇到问题，可以尝试在浏览器的开发者工具中调试，查看选择的 NodeList 是否包含预期的元素，以及是否有任何错误信息。