使用getElementsByTagName修改CSS样式失效问题咨询

你不是方法用错了，是没搞懂getElementsByTagName的返回值类型：它返回的是HTMLCollection——一个包含所有匹配<li>元素的动态集合，而不是单个DOM元素。.style.color是单个DOM元素的属性，直接给整个集合设置这个属性根本不会作用到每个<li>上，自然没效果。

而你用querySelectorAll（返回NodeList）或getElementsByClassName（同样返回HTMLCollection）能生效，本质是你对这些集合做了遍历操作，逐个给每个元素设置了样式，不是方法本身支持直接给集合加style。

正确的写法需要遍历getElementsByTagName返回的集合：

// 错误写法（直接操作集合）
document.getElementsByTagName("li").style.color = "red";

// 正确写法1：for循环遍历
const liElements = document.getElementsByTagName("li");
for (let i = 0; i < liElements.length; i++) {
  liElements[i].style.color = "red";
}

// 正确写法2：转成数组后用forEach
Array.from(document.getElementsByTagName("li")).forEach(li => {
  li.style.color = "red";
});

补充说明：querySelectorAll返回的NodeList在现代浏览器里原生支持forEach，而HTMLCollection不行，所以需要转成数组再用forEach，或者用传统for循环。不管用哪种获取元素的方法，只要是集合类型，都得遍历到单个元素才能设置样式。

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