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

Question

我只想将一个类名改为另一个.

我试过用了

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

但它不起作用.我是javascript的新手.

Answer 1

说明

document.getElementsByClassName返回一个HTMLCollection,而不仅仅是一个元素数组.这意味着该集合是实时的,因此在这种特定情况下,它保留了始终保持所有具有"当前"类的元素的要求.

巧合的是,你正在删除class集合所依赖的东西,因此更新了集合.如果你value在循环中设置属性(例如)会完全不同- 集合不会受到影响,因为class"当前"没有被删除.如果你要添加一个类,例如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),这将无限循环.

方法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