Question

element.classList属于DOMTokenList类型。

有没有方法可以清除此列表？

Answer 1

我不知道与classList相关的“功能”意义上的“方法”。它有.add()和.remove()方法来添加或删除单个类，但是您可以清除列表中的所有类，如下所示：

element.className = "";

Answer 2

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

Answer 3

我建议不要使用className，因为classList可能会导致更快的DOM更新。

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

我使用我编写的实用程序类来完成此任务。第一种方法是你正在寻找的方法，但我要包括更多供你参考。

apply()

请注意，我没有在所有浏览器中对此进行全面测试，因为我正在处理的项目只需要在一组非常有限的现代浏览器中工作。但它应该回到IE10，如果你为classList包含一个垫片（https://github.com/eligrey/classList.js），它应该回到IE7（以及自从以后的SVG） Eli Gray的垫片也在不受支持的浏览器中添加了对SVG的支持。）

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

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

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

Answer 4

使用ES6和散布运算符，这很容易。

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

这会将列表项作为参数传递给remove方法。
由于classList.remove方法可以包含许多参数，因此将它们全部删除并清除classList。

即使可读性也不强。 @Fredrik Macrobond的answer更快。
在jsperf上查看不同的解决方案及其测试结果。

Answer 5

这是另一种方法：

element.setAttribute("class", "")

Answer 6

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

elem.removeAttribute('class')

Answer 7

如今，classList比(remove|set)Attribute或className更受青睐。 Pekaaw的答案很好，一种类似的替代方法是设置DomTokenList.value

elem.classList.value = ''

清除element.classList

7 个答案: