getElementsByClassName不返回固定答案

Question

在Javascript中，我使用以下命令获取给定类的元素：

A = document.getElementsByClassName("someclass");
> A contains elements e1, e2, e3, e4

然后，我改变其中一个元素的类：

document.getElementById("e2").className = "anotherclass";

令我惊讶的是，阵列A在此过程中已自动更改!!

> A contains elements e1, e3, e4

我认为getElementsByClassName返回的数组现在保持不变。

• 怎么可能？这是预期的行为吗？
• 有没有一种简单的方法可以改变它？

这是JSfiddle。

请注意，getElementById也是如此。

Answer 1

这是因为A不是Array。 getElementByClassName会返回HTMLCollection，由于文档中的更改，该{{3}}会进行实时更新。

将类数组对象转换为数组的最简单方法是执行此操作：

var A = ...
var A_array = Array.prototype.slice.call(A);

或者您可以通过NodeList获得querySelectorAll，而var A = document.querySelectorAll('.someclass'); 无法实时更新。

{{1}}

Answer 2

这些函数返回 live NodeLists。这意味着它们会自动更新以反映DOM的当前内容。

请参阅NodeList documentation。