javascript - 如何仅使用 DOM 将所有元素上的一个类替换为另一个类？

Question

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

我试过

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

但它不起作用。我是 JavaScript 的新手。

Answer 1

解释

document.getElementsByClassName 返回一个 HTMLCollection，而不仅仅是一个元素数组。这意味着该集合是实时的，因此在这种特定情况下，它保留了将始终保存所有类为“current”的元素的要求。

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

来自 MDN 文档的精彩描述:

HTMLCollections in the HTML DOM are live; they are automatically updated when the underlying document is changed.

方法一

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

var els = document.getElementsByClassName('current'),
    i = els.length;

while (i--) {
    els[i].className = 'none';
}

演示: http://jsfiddle.net/fAJgT/

(demo中的代码有一个setTimeout，这样一开始你可以看到原来的边框颜色，然后1.5秒后，看到它的变化)

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

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

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

方法二

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

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

演示: http://jsfiddle.net/EJLXe/

这基本上是在说“当集合中还有项目时，修改第一个(修改后将被删除)”。不过，我真的不建议使用该方法，因为它只适用于特别是因为您最终修改了集合。如果您没有删除特定类，或者使用普通数组或非实时集合(没有拼接ing)，这将无限循环.

方法三

另一种选择是将集合切片(浅拷贝)到一个数组中，然后正常循环遍历它。但我看不出有任何理由/改进这样做。这里有一个例子:

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/

方法四

最后，您可以使用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
• 切片:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice
• querySelectorAll: https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll