javascript - 通过 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 是“实时的”——它会随着您更改类名而改变。也就是说，当您更改第一个元素的类时，列表会立即比原来短一个元素。

试试这个:

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

(无需使用 setAttribute() 来设置“class”值 - 只需更新“className”属性即可。在旧版本中使用 setAttribute() IE 无论如何都无法工作。)

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

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

正如评论中指出的那样，这样做的优点是不依赖 NodeList 对象的语义。 (另请注意，再次感谢评论，如果您需要它在旧版本的 Internet Explorer 中工作，则必须编写一个显式循环以将元素引用从 NodeList 复制到数组。)