使用JS遍历修改class为nav-button的元素颜色失效问题咨询

原写法的问题并非style属性不被识别，而是你通过firstChild拿到的节点根本不具备可操作的style属性：

• firstChild会无差别返回当前元素下的第一个直接子节点，可能是DOM元素、空白文本节点、注释节点，并非一定是能设置样式的元素节点
• 日常编写HTML时，我们通常会在标签之间留排版用的换行、空格，这些内容会被解析为空白文本节点。如果写<button class="nav-button">开标签结束后先打了换行再写内部嵌套元素，firstChild拿到的就是这个空白文本节点
• 文本节点本身不存在style对象，对其赋值style.color会直接触发运行时报错，导致整个循环的样式修改逻辑中断失效

因为你明确要求必须使用firstChild属性（适配元素内部有嵌套其他节点的场景），只需要在取到节点后增加节点类型判断即可，修改后的完整代码如下：

var elements = document.getElementsByClassName('nav-button')
for (i = 0; i < elements.length; i++) {
    const firstNode = elements[i].firstChild
    // nodeType === 1 是DOM元素节点的固定标识值，只有这类节点有可操作的style对象
    if (firstNode && firstNode.nodeType === 1) {
        firstNode.style.color = 'red'
    }
}

你之前见过的大量直接写xxx.firstChild.style.xxx且能正常运行的示例，都有个共同前提：HTML结构没有排版冗余——也就是开标签结束后直接跟子元素开标签，没有任何空格、换行，这时候firstChild刚好取到子元素节点，自然能正常运行。
实际项目里几乎不会写这种无排版的压缩HTML，所以直接用无判断的firstChild写样式，大概率会因为抓到文本节点失效。很多人碰到这个问题会直接把firstChild换成firstElementChild，这个写法确实能自动跳过文本节点拿到第一个元素子节点，但因为你有必须使用firstChild的约束，这个替换方案并不适配你的需求。
如果你碰到部分节点的firstChild是纯文本节点（比如.nav-button开标签后直接写了导航文字，没有嵌套标签），这类场景下因为文本节点本身没有样式能力，直接用firstChild是无法完成改色的，需要先确认DOM结构是否符合你提到的“内部嵌套有其他元素”的前提。

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