for循环不处理getElementsByClassName找到的每个元素

html5 • • 问答

我在 index.html 中有一个带有按钮的面板：

<div>
    <img src="icons/trash.svg">
    <img src="icons/copy.svg">
</div>
<div>
    <img src="icons/color.svg">
    <img src="icons/copy-format.png" >
    <img src="icons/paste-format.png">
</div>
<div>
    <img src="icons/addpicture.svg">
</div>

和风格：

.toolsPanelHiddenButton {
    display: none;
}

我需要用“toolsPanelActiveButton”类隐藏每个按钮。如果我使用这样的代码

    var elems = document.getElementsByClassName('toolsPanelActiveButton');

    for (let elem of elems) {
        elem.className="toolsPanelHiddenButton";
    }

我只隐藏了一半的元素：

隐藏所选类的每个元素的正确方法是什么？

我希望在使用 for 循环后有空面板。

回答

正确的方法是使用 a 进行迭代while：

var elems = document.getElementsByClassName('toolsPanelActiveButton');

while (elems.length) {
    elems[0].className = "toolsPanelHiddenButton";
}

为什么？因为它是一个活跃的节点列表，你从中获取.getElementsByClassName()。这意味着当您删除旧类时，该元素不再在列表中。

另一种解决方案是使用.querySelectorAll()，因为它返回一个非活动节点列表：

var elems = document.querySelectorAll('.toolsPanelActiveButton');

for (let elem of elems) {
    elem.className="toolsPanelHiddenButton";
}

另外，为了完整性，我认为像这样直接更新整个类列表（即 setting .className）是一种脆弱的编程实践。通常，不相关的页面功能可能希望共享页面上元素的类列表。如果一个特性在整个类列表中被踩到了，那么这样的特性就不可能实现。现代浏览器具有.classList带有方便 API的对象。

以上是for循环不处理getElementsByClassName找到的每个元素的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>