javascript - 清除 element.classList

Question

element.classList是DOMTokenList类型。

有没有办法清除这个列表？

Answer 1

我不知道与classList. 它具有添加或删除单个类.add()的.remove()方法，但是您可以在从元素中删除所有类的意义上清除列表，如下所示：

element.className = "";

Answer 2

使用 ES6 和扩展运算符，这很容易。

element.classList.remove(...element.classList);

这会将列表项作为参数传播给 remove 方法。
由于该classList.remove方法可以采用许多参数，因此它们都被删除并被classList清除。

即使它是可读的，它也不是很有效。@Fredrik Macrobond 的回答更快。在jsperf
查看不同的解决方案及其测试结果。

Answer 3

var classList = element.classList;
while (classList.length > 0) {
   classList.remove(classList.item(0));
}

Answer 4

这是另一种方法：

element.setAttribute("class", "")

Answer 5

如今，classList首选(remove|set)Attribute或className。Pekaaw 上面的回答很好，1 个类似的替代方法是设置DomTokenList.value

elem.classList.value = ''

Answer 6

我建议不要使用classNameasclassList可能会导致更快的 DOM 更新。

的remove()方法DOMTokenList（就是这样classList）可以接受多个参数 - 每个参数都是要删除的类名字符串（参考）。首先，您需要将 转换classList为类名的计划数组。有些人习惯Array.prototype.slice()这样做，但我不是粉丝，我认为for 循环在大多数浏览器中更快 - 但无论哪种方式，我都没有反对 for 循环，而且切片对我来说通常感觉像是一种黑客攻击。获得数组后，您只需apply()将该数组作为参数列表传递。

我使用我编写的实用程序类来完成此操作。第一种方法是您正在寻找的方法，但我提供了更多供您参考。

ElementTools.clearClassList = function(elem) {
    var classList = elem.classList;
    var classListAsArray = new Array(classList.length);
    for (var i = 0, len = classList.length; i < len; i++) {
        classListAsArray[i] = classList[i];
    }
    ElementTools.removeClassList(elem, classListAsArray);
}
ElementTools.removeClassList = function(elem, classArray) {
    var classList = elem.classList;
    classList.remove.apply(classList, classArray);
};
ElementTools.addClassList = function(elem, newClassArray) {
    var classList = elem.classList;
    classList.add.apply(classList, newClassArray);
};
ElementTools.setClassList = function(elem, newClassArray) {
    ElementTools.clearClassList(elem);
    ElementTools.addClassList(elem, newClassArray);
};

请注意，我没有在所有浏览器中对此进行彻底测试，因为我正在处理的项目只需要在非常有限的一组现代浏览器中工作。但它应该可以回到 IE10，如果你为 classList包含一个 shim ( https://github.com/eligrey/classList.js )，它应该可以回到 IE7（也可以使用 SVG，因为 Eli Grey 的 shim 增加了对SVG 在不受支持的浏览器中也是如此）。

我考虑的另一种方法是向后循环classList并为每个条目调用remove()classList 。（向后，因为当您删除每个参数时长度会发生变化。）虽然这也应该有效，但我认为使用多个参数remove()可能会更快，因为现代浏览器可能会针对它进行优化并避免每次调用 remove() 时对 DOM 进行多次更新一个 for 循环。此外，这两种方法都需要一个 for 循环（构建一个列表或删除每个），所以我认为这种替代方法没有任何好处。但同样，我没有做任何速度测试。

如果有人测试各种方法的速度或有更好的解决方案，请发布。

编辑：我在 shim 中发现了一个错误，它阻止它正确添加对 IE11/10 的多个参数的支持add()和remove()。我已经在 github 上提交了一份报告。

Answer 7

另一种选择是简单地删除类属性：

elem.removeAttribute('class')