javascript - 将类名应用于 Html 节点数组

Question

我正在尝试将一个类应用到一组 HTML 节点，例如:

 var divRelatedBox = document.getElementsByClassName('related-box');
 divRelatedBox.classList.toggle('hide')

但它不工作......

我做错了什么？

Answer 1

您可能对 jQuery 感到困惑。与 jQuery 对象相反，您不能应用 HTMLElement直接在 HTMLCollection 上的方法并将其应用于列表中的每个元素。您必须遍历列表并逐一应用您的方法。

var divRelatedBox = document.getElementsByClassName('related-box');

for (var i = 0; i < divRelatedBox.length; i++) {
    divRelatedBox[i].classList.toggle('hide');
}

或使用 Array.prototype.forEach ，我发现它更干净:

Array.prototype.forEach.call(divRelatedBox, function (element) {
    element.classList.toggle('hide');
});