Question

我正在尝试使用特定类名在页面上的所有元素的JavaScript（不使用jQuery）中获取列表。因此，我使用getElementsByClassName（）函数，如下所示：

var expand_buttons = document.getElementsByClassName('expand');
console.log(expand_buttons, expand_buttons.length, expand_buttons[0]);

请注意，我的页面上有三个锚元素，类为'expand'。此console.log（）输出

[] 0 undefined

接下来，对于踢，我将expand_buttons扔到它自己的数组中，如下所示：

var newArray = new Array(expand_buttons);
console.log(newArray, newArray.length);

这突然输出

[NodeList[3]] 1

我可以点击节点列表，查看页面上三个'expand'锚元素的属性。值得注意的是，我能够在w3schools test page中使用我的代码。

也许值得注意的是，我对document.getElementsByName的使用实际上输出（到控制台）一个元素数组，但是当我询问它的长度时，它告诉我0.同样，如果我尝试访问数组元素正常使用array_name[0]，它输出'undefined'，尽管当我将对象打印到控制台时，数组内部明显存在元素。

有人知道为什么会这样吗？我只想循环遍历DOM元素，而我现在正在避免使用jQuery，因为我正在尝试使用vanilla JavaScript进行编码。

谢谢，

ParagonRG

Answer 1

这不是一个JavaScript的东西，因为它是一个Web浏览器的东西。该API由本机对象（document对象）提供，并且由DOM规范返回NodeList对象。您可以将NodeList视为一个数组，它类似，但明显不同（正如您所注意到的）。

您始终可以将NodeList复制到新阵列：

var nodeArr = Array.prototype.slice.call(theNodeList, 0);

或在现代ES2015环境中：

var nodeArr = Array.from(theNodeList);

JavaScript总是存在于某些运行时上下文中，上下文可以包含为JavaScript代码提供工具的各种API。 Web浏览器是这些上下文之一。 DOM的指定方式并不特别局限于JavaScript;它是一种与语言无关的界面定义。

我想这个答案的简短版本是“因为它只是。”

Answer 2

它不会返回一个数组，因为它是returns is "live"的对象，特别是它是一个实时的NodeList：

在大多数情况下，NodeList是一个实时集合。这意味着DOM树上的更改将反映在集合中。

为什么JavaScript的getElementsByClassName提供的对象不是数组？

2 个答案: