如何使用JavaScript实现点击按钮或开关选中所有段落并修改字体颜色

错误原因 #

• document.querySelector() 设计规则为仅返回匹配到的第一个DOM元素，所以首次尝试仅能修改第一个段落颜色，符合方法的预期表现。
• document.querySelectorAll() 返回的是包含所有匹配元素的NodeList类数组集合，集合本身没有style属性，直接给集合赋值style.color属于语法错误，因此代码完全不生效。
• 为多个元素设置相同id不符合HTML规范要求，规范明确规定id属性在单页面内必须唯一，浏览器处理id查询时只会返回第一个匹配元素，因此该方案无法生效。

正确实现方案 #

你需要遍历querySelectorAll返回的所有段落元素，逐个修改样式即可，参考代码如下：

<script>
var colorChanger = document.getElementsByTagName("button")[0];
colorChanger.addEventListener("click",function() {
  // 获取所有p元素集合
  const allParagraphs = document.querySelectorAll('p');
  // 遍历每个元素单独设置样式
  allParagraphs.forEach(p => {
    p.style.color = "blue";
  });
});
</script>

如果需要兼容不支持forEach的旧浏览器（如IE），可以替换为传统for循环遍历：

for(var i = 0; i < allParagraphs.length; i++) {
  allParagraphs[i].style.color = "blue";
}

内容的提问来源于stack exchange，提问作者Ömer Kaya Ekici