为什么JavaScript的getElementsByClassName提供的对象不是数组？ [英] Why does JavaScript's getElementsByClassName provide an object that is NOT an array?

问题描述

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

I'm trying to get a list in JavaScript (not using jQuery) of all the elements on the page with a specific class name. I therefore employ the getElementsByClassName() function as follows:

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

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

Note that I have three anchor elements on my page with the class 'expand'. This console.log() outputs

[] 0 undefined

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

Next, for kicks, I threw expand_buttons into its own array as follows:

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

这突然输出

[NodeList[3]] 1

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

and I can click through the nodelist and see the attributes of the three 'expand' anchor elements on the page. It's also worth noting that I was able to get my code working in a w3schools test page.

还可能注意到我对document.getElementsByName的使用实际上输出了（到控制台）一个元素数组，但是当我要求时它的长度，它告诉我0.同样，如果我尝试正常使用 array_name [0] 访问数组元素，它输出'undefined'，尽管显然有一个我将对象打印到控制台时，数组内部的元素。

It may also be of note that my use of document.getElementsByName actually does output (to the console) an array of elements, but when I ask for its length, it tells me 0. Similarly, if I try to access an array element using array_name[0] as normal, it outputs 'undefined', despite there clearly being an element inside of an array when I print the object to the console.

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

Does anybody have any idea why this might be? I just want to loop through DOM elements, and I'm avoiding jQuery at the moment because I'm trying to practice coding with vanilla JavaScript.

谢谢，

ParagonRG

ParagonRG

推荐答案

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

It's not so much a JavaScript thing as it is a web browser thing. That API is supplied by a native object (the document object), and by the DOM spec it returns a NodeList object. You can treat a NodeList like an array, and it's similar, but distinctly different (as you've noticed).

您始终可以将NodeList复制到新数组：

You can always copy a NodeList to a new array:

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

或在现代ES2015环境中：

or in modern ES2015 environments:

var nodeArr = Array.from(theNodeList);

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

JavaScript always exists in some runtime context, and the context can include all sorts of APIs that provide facilities to JavaScript code. A web browser is one of those contexts. The DOM is specified in a way that's not especially partial to JavaScript; it's a language-neutral interface definition.

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

I guess the short version of this answer would be, "because it just does."

这篇关于为什么JavaScript的getElementsByClassName提供的对象不是数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！