清除element.classList

Question

element.classList

属于

DOMTokenList

类型。

有办法清除这个列表吗？

Answer 1

我不知道与

classList

相关的“函数”意义上的“方法”。它有

.add()

和

.remove()

方法来添加或删除单个类，但您可以从元素中删除所有类的意义上清除列表，如下所示：

element.className = "";

Answer 2

使用 ES6 和展开运算符，这变得轻而易举。

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

这会将列表项作为参数传播给删除方法。
由于

classList.remove

方法可以接受多个参数，因此它们全部被删除，并且

classList

被清除。

尽管它是可读的，但效率不是很高。 @Fredrik Macrobond 的 answer 更快。
在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

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

elem.removeAttribute('class')

Answer 7

我建议不要使用

className

，因为

classList

可能会导致更快的 DOM 更新。

remove()

的

DOMTokenList

方法（这就是

classList

）可以接受多个参数 - 每个参数都是要删除的类名字符串（reference）。首先，您需要将

classList

转换为类名的计划数组。有些人使用

Array.prototype.slice()

来做到这一点，但我不是一个粉丝，我 think 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添加一个垫片（https://github.com/eligrey/classList.js），它应该可以回到IE7（并且也可以使用SVG） Eli Grey 的 shim 也在不支持的浏览器中添加了对 SVG 的支持）。

我考虑的另一种方法是向后循环

classList

 并为每个条目在 classList 上调用 

remove()

 。 （向后，因为当您删除每个时，长度会发生变化。）虽然这也应该有效，但我认为在 

remove()

 上使用多个参数可能会更快，因为现代浏览器可能会对其进行优化，并避免每次调用删除时对 DOM 进行多次更新() 在 for 循环中。此外，这两种方法都需要 for 循环（构建列表或删除每个列表），因此我认为这种替代方法没有任何好处。但同样，我

没有进行任何速度测试。

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

编辑：我在垫片中发现了一个错误，导致它无法正确添加对 IE11/10 的支持，以支持 add()

 和 

remove()

 的多个参数。我已在 github 上提交了

报告。