我只想将一个类名更改为另一个类名。
我试过使用
document.getElementsByClassName("current").setAttribute("class", "none");
但它不起作用。我是 javascript 的新手。
问问题
9267 次
2 回答
23
解释
document.getElementsByClassName返回一个HTMLCollection，而不仅仅是一个元素数组。这意味着该集合是活动的，因此在这种特定情况下，它保留了始终包含“当前”类的所有元素的要求。
巧合的是，您正在删除class集合所依赖的内容，因此更新了集合。如果您value在循环中设置属性（例如），那将完全不同 - 集合不会受到影响，因为class“当前”没有被删除。如果您添加一个类，例如，它也会完全不同el.className += " none";，但事实并非如此。
MDN 文档中的一个很好的描述：
HTML DOM 中的 HTMLCollections 是实时的；当基础文档更改时，它们会自动更新。
方法一
克服所有这些混乱的一个简单方法是向后循环。
var els = document.getElementsByClassName('current'),
i = els.length;
while (i--) {
els[i].className = 'none';
}
演示：http: //jsfiddle.net/fAJgT/
（演示中的代码有setTimeout一个
这是有效的，因为它修改了集合中的最后一个项目 - 当它被修改（并自动删除）时，移动到它之前的项目。所以它不会遭受自动删除的任何后果。
做同样事情的另一种设置是：
for (i = els.length; i >= 0; i--) {
方法二
另一个答案让我意识到你可以不断地对找到的第一个项目进行操作。当您删除特定类时，该元素将从集合中删除，因此您可以保证第一项始终是集合中的新项目。因此，检查length财产应该是一个安全的检查条件。这是一个例子：
var els = document.getElementsByClassName('current');
while (els.length) {
els[0].className = 'none';
}
演示：http: //jsfiddle.net/EJLXe/
这基本上是在说“虽然集合中还有项目，但修改第一个（修改后将被删除）”。不过，我真的不建议您使用该方法，因为它仅在您最终修改了 collection 时才特别有效。如果您没有删除特定的类，或者使用普通数组或非实时集合（没有spliceing） ，这将无限循环。
方法 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.getElementsByClassNameHTMLCollection：https ://developer.mozilla.org/en-US/docs/DOM/HTMLCollectionslice：https ://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slicequerySelectorAll：https ://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
于 2013-05-12T19:11:24.730 回答
3
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';
}
于 2013-05-12T19:06:11.433 回答