通过ClassName获取所有元素并更改ClassName

Question

我想..。

1. 扫描文档中具有特定类名的所有元素。
2. 在该元素的innerHTML上执行一些关键功能
3. 更改该元素的类名，以便以后进行另一次扫描，就不会重做该元素

我认为这段代码可以工作，但出于某种原因，它在第一个实例之后中断了循环，元素的类名从未更改过。不需要任何框架。

function example()
{
    var elementArray;

    elementArray = document.getElementsByClassName("exampleClass");

    for(var i = 0; i < elementArray.length; i++)
    {
        // PERFORM STUFF ON THE ELEMENT
        elementArray[i].setAttribute("class", "exampleClassComplete");
        alert(elementArray[i].className);
    }   
}

编辑(最终答案) --这是最后的产品，以及我是如何在我的站点中实现@cHao的解决方案的。目的是在页面上找到各种各样的时间戳，并将它们更改为以前的时间。谢谢大家的帮助，我从这个问题中学到了很多东西。

function setAllTimeAgos()
{
    var timestampArray = document.getElementsByClassName("timeAgo");

    for(var i = (timestampArray.length - 1); i >= 0; i--)
    {
        timestampArray[i].innerHTML = getTimeAgo(timestampArray[i].innerHTML);
        timestampArray[i].className = "timeAgoComplete";
    }
}

Answer 1

问题是返回给您的NodeList是"live“--当您更改类名时，它会发生变化。也就是说，当您更改第一个元素上的类时，列表将立即缩短一个元素。

试试这个：

  while (elementArray.length) {
    elementArray[0].className = "exampleClassComplete";
  }

(没有必要使用setAttribute()设置"class“值--只需更新"className”属性即可。在IE的旧版本中使用setAttribute()是行不通的。)

或者，将NodeList转换为普通数组，然后使用索引迭代：

  elementArray = [].slice.call(elementArray, 0);
  for (var i = 0; i < elementArray.length; ++i)
    elementArray[i].className = "whatever";

正如注释中指出的，这具有不依赖于NodeList对象的语义的优点。(还请注意，再次感谢一条注释，如果您需要此功能在早期版本的Internet中工作，则必须编写一个显式循环将元素引用从NodeList复制到数组中。)

Answer 2

大多数返回元素列表的DOM函数都返回NodeList而不是数组。最大的区别是NodeList通常是活动的，这意味着更改文档会导致节点神奇地出现或消失。这可能会导致节点移动一点点，并抛出一个不考虑此问题的循环。

但是，与其将列表转换为数组或其他任何东西，您还可以简单地在返回的列表上向后循环。

function example()
{
    var elements = document.getElementsByClassName("exampleClass");

    for(var i = elements.length - 1; i >= 0; --i)
    {
        // PERFORM STUFF ON THE ELEMENT
        elements[i].className = "exampleClassComplete";

        // elements[i] no longer exists past this point, in most browsers
    }   
}

在这一点上，NodeList的活性并不重要，因为从它中删除的唯一元素将是当前正在运行的元素之后的元素。它之前出现的节点不会受到影响。

Answer 3

另一种方法可以是使用选择器：

var arr = document.querySelectorAll('.exampleClass');
for (var i=0;i<arr.length;i++) {
    arr.innerHTML = "new value";
}

虽然它与旧的浏览器不兼容，但如果网页内容是针对现代浏览器的，它也可以做到这一点。