getElementsByClassName 不返回固定答案

getElementsByClassName does not return a fixed answer

本文关键字：答案 返回 getElementsByClassName      更新时间：2023-09-26

在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也是如此。

这是因为A不是Array。 getElementByClassName返回一个由于文档中的更改而实时更新的HTMLCollection。

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

var A = ...
// With ES5 code
var A_array = Array.prototype.slice.call(A);
// With ES6 code
var A_array = Array.from(A);

或者你可以通过querySelectorAll获得NodeList，这不会实时更新。

var A = document.querySelectorAll('.someclass');

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

请参阅NodeList文档。

相关文章：