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

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

我可以点击节点列表,查看页面上三个"展开"锚元素的属性.值得注意的是,我能够在w3schools测试页面中使用我的代码.

还可能需要注意的是,我对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; 它是一种与语言无关的接口定义.

我想这个答案的简短版本是"因为它确实存在."