javascript - 不使用 jquery 从元素组中删除特定类

Question

我有多个 span 元素，我尝试删除 activeLang 类。我怎样才能做到这一点？

<div class="header_content_lang">
    <span class="langNav">
        ...
    </span>
    <span class="langNav">
        ...
    </span>
    <span class="langNav activeLang">
        ...
    </span>
</div>

我这样尝试过，就像建议的那样here :

var x = document.getElementsByClassName(".activeLang");

[].forEach.call(x, function(el) {
    el.classList.remove(".activeLang");

});

console.log(x[0]);
console.log(x[1]);
console.log(x[2]);

但是所有日志的输出都是“未定义”的。

Answer 1

在现代的最新浏览器上，您可以使用 forEach在 querySelectorAll 返回的 HTMLCollection(继承自 NodeList)上:

document.querySelectorAll(".activeLang").forEach(function(element) {
    element.classList.remove("activeLang");
});

在旧浏览器上，您需要对其进行填充，可以这样做:

if (!NodeList.prototype.forEach) {
    Object.defineProperty(NodeList.prototype, "forEach", {
        value: Array.prototype.forEach
    });
}

您可能还需要classList的polyfill .

在真正过时的浏览器(IE8)上，您必须填充 Array.prototype.forEach (和classList)首先。

或者使用任何描述的“类数组”循环机制 in this answer .