如何从纯JavaScript中的元素中删除一个类？

Question

我想知道如何选择类名为"widget"和"hover"的所有元素,然后从这些元素中删除类"hover".

我有以下JavaScript代码,用于选择类"widget"和"hover"的所有元素:

var elements = document.getElementsByClassName('widget hover');
console.log(elements);

这似乎工作并输出这样的东西(没有错误):

[div#.widget... 

问题是,如果我尝试删除类"悬停",我收到一个错误:

var elements = document.getElementsByClassName('widget hover');
console.log(elements);
elements.classList.remove("hover");

这输出:

[item: function]
length: 0
Uncaught TypeError: Cannot call method 'remove' of undefined 

谁能告诉我我做错了什么？

请注意我在jQuery中使用它:

$('.widget.hover').removeClass('hover');

...但我正在寻找纯JavaScript的解决方案.

Answer 1

var elems = document.querySelectorAll(".widget.hover");

[].forEach.call(elems, function(el) {
    el.classList.remove("hover");
});

你可以修补.classList到IE9.否则,你需要修改.className.

var elems = document.querySelectorAll(".widget.hover");

[].forEach.call(elems, function(el) {
    el.className = el.className.replace(/\bhover\b/, "");
});

该.forEach()还需要IE8的补丁,但是这是很常见的反正.

Answer 2

现在是 2021 年...保持简单，只需使用 es6

时代变了，现在最干净、最易读的方法是：

Array.from(document.querySelectorAll('.widget.hover')).forEach((el) => el.classList.remove('hover'));

如果您不能支持箭头函数，那么只需将其转换为：

Array.from(document.querySelectorAll('.widget.hover')).forEach(function(el) { 
    el.classList.remove('hover');
});

此外，如果您需要支持非常旧的浏览器，然后用polyfil的forEach和Array.from与您的生活。

Answer 3

查找元素:

var elements = document.getElementsByClassName('widget hover');

由于elements是一个live数组并反映了所有dom更改,您可以hover使用简单的while循环删除所有类:

while(elements.length > 0){
    elements[0].classList.remove('hover');
}

Answer 4

elements是一个DOM对象数组.你应该做这样的事情

for (var i = 0; i < elements.length; i++) {
   elements[i].classList.remove('hover');
}

ie:枚举元素集合,并为集合内的每个元素调用remove方法

Answer 5

对于 ES6，这可以通过oneliners通过几种方式来完成，您可以使用展开运算符创建一个元素数组...，并使用该运算符删除该类map：

和querySelectorAll：

[...document.querySelectorAll('.widget')].map(x => x.classList.remove('hover'));

和getElementsByClassName：

[...document.getElementsByClassName('widget')].map(x => x.classList.remove('hover'));

对于querySelectorAll，请注意使用.widget代替widget。扩展运算符的另一种选择是使用Array.from：

Array.from(document.querySelectorAll('.widget')).map(x => x.classList.remove('hover'));

Answer 6

这可能有帮助：

let allElements = Array.from(document.querySelectorAll('.widget.hover'));
for (let element of allElements) {
  element.classList.remove('hover');
}