如何在所有元素上用另一个类替换一个类，仅使用DOM

How can I replace one class with another on all elements, using just the DOM?

本文关键字：一个 DOM 替换 元素 另一个      更新时间：2023-09-26

我只是想将一个类名更改为另一个。

我试过使用

document.getElementsByClassName("current").setAttribute("class", "none");

但它不起作用。我是javascript新手

说明

document.getElementsByClassName返回一个HTMLCollection，而不仅仅是一个元素数组。这意味着集合是活动的，所以在这个特定的情况下，它保留了总是保存类为"current"的所有元素的要求。

巧合的是，您正在删除集合所依赖的class，因此更新了集合。如果在循环中设置value属性(例如)，情况就完全不同了——集合不会受到影响，因为class"current"没有被删除。如果您要添加类，例如el.className += " none";，情况也会完全不同，但情况并非如此。

来自MDN文档的一个很好的描述:

HTML DOM中的HTMLCollections是活的;当基础文档发生更改时，它们将自动更新。

方法1

克服所有这些混乱的一个简单方法是向后循环。

var els = document.getElementsByClassName('current'),
    i = els.length;
while (i--) {
    els[i].className = 'none';
}
演示:

http://jsfiddle.net/fAJgT/

(演示中的代码有一个setTimeout，只是为了让您可以首先看到原始的边框颜色，然后在1.5秒后，看到它的变化)

这是有效的，因为它修改集合中的最后一项-当它被修改(并自动删除)时，移动到它之前的项。因此，它不会遭受自动删除的任何后果。

做同样事情的另一种设置是:

for (i = els.length; i >= 0; i--) {

方法2

另一个答案让我意识到你可以不断地对找到的第一个项目进行操作。当您删除特定的类时，元素也会从集合中删除，因此可以保证第一个项目始终是集合中的新项目。因此，检查length属性应该是一个安全的检查条件。下面是一个例子:

var els = document.getElementsByClassName('current');
while (els.length) {
    els[0].className = 'none';
}
演示:

http://jsfiddle.net/EJLXe/

这基本上是说"当集合中仍然有项目时，修改第一个(修改后将被删除)"。但我真的不建议使用该方法，因为它只适用于，因为您最终会修改集合。如果没有删除特定的类，或者使用普通数组或非活动集合(没有splice ing)，则会产生无限循环。

方法3

另一种选择是将集合slice(浅复制)到数组中并正常循环。但我看不出有任何理由/改进去做。这里有一个例子:

var els = document.getElementsByClassName('current'),
    sliced = Array.prototype.slice.call(els), i;
for (i = 0; i < sliced.length; i++) {
    sliced[i].className = 'none';
}
演示:

http://jsfiddle.net/LHe95/2/

方法4

最后，您可以使用document.querySelector -它返回一个非活动的NodeList(因此您可以像正常一样循环)，甚至在浏览器中比document.getElementsByClassName有更好的支持。下面是一个例子:

var els = document.querySelectorAll('.current'),
    i;
for (i = 0; i < els.length; i++) {
    els[i].className = 'none';
}
演示:

http://jsfiddle.net/xq8Xr/

引用:

  • document.getElementsByClassName: https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName
  • HTMLCollection: https://developer.mozilla.org/en-US/docs/DOM/HTMLCollection
  • slice: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice
  • querySelectorAll: https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

document.getElementsByClassName("current")返回HTMLCollection，而不是HTMLElement。可以像访问数组一样访问列表中的元素。

下面的代码将改变HTMLCollection中第一个元素的类。

document.getElementsByClassName("current")[0].setAttribute("class", "none");

但是，您不必使用setAttribute方法，您可以设置元素的className属性。

 element.className = 'none';

请注意，HTMLCollection是实时的，这意味着一旦元素不再具有current类名，该元素将从数组中删除，因此为了避免任何问题，您可以使用以下方法迭代它:

var list = document.getElementsByClassName("current");
while (list.length) {
    list[0].className = 'none';
}
相关文章：