为何使用querySelector修改指定类样式仅生效于单个元素？

嘿，这个问题其实是DOM API的使用误区导致的，我来给你拆解下：

为什么只有单个元素被修改？ #

你用的document.querySelector('.test')方法，只会返回页面中匹配指定选择器的第一个元素，哪怕页面里有多个带.test类的元素，它也只取第一个。所以你的代码里listEl其实只是那个<p>标签，点击按钮自然只有它的颜色变红啦。

怎么修改所有匹配元素？ #

要选中所有带.test类的元素，你需要用document.querySelectorAll('.test')——这个方法会返回一个包含所有匹配元素的NodeList（类似数组的集合），然后你只需要遍历这个集合，给每个元素单独设置样式就行。

修正后的完整代码 #

<p class="test">Lorem ipsum dolor sit.</p>
<small class="test">Lorem ipsum dolor sit. Lorem ipsum dolor sit.</small>
<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
  // 获取所有带.test类的元素
  const testElements = document.querySelectorAll('.test');
  // 遍历每个元素，设置文字颜色为红色
  testElements.forEach(element => {
    element.style.color = "red";
  });
}
</script>

兼容旧浏览器的遍历方式 #

如果你的代码需要兼容不支持NodeList.forEach()的旧浏览器（比如IE），可以用普通的for循环来遍历：

function myFunction() {
  const testElements = document.querySelectorAll('.test');
  for (let i = 0; i < testElements.length; i++) {
    testElements[i].style.color = "red";
  }
}

内容的提问来源于stack exchange，提问作者GerryofTrivia