gpt4 book ai didi

javascript - 为什么 JavaScript 的 getElementsByClassName 提供的对象不是数组?

转载 作者:数据小太阳 更新时间:2023-10-29 05:04:31 25 4
gpt4 key购买 nike

我正在尝试获取页面上具有特定类名的所有元素的 JavaScript(不使用 jQuery)列表。因此,我按如下方式使用 getElementsByClassName() 函数:

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

请注意,我的页面上有三个 anchor 元素,类为“expand”。这个 console.log() 输出

[] 0 undefined

接下来,为了好玩,我将 expand_buttons 放入它自己的数组中,如下所示:

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

这突然输出

[NodeList[3]] 1

我可以单击节点列表并查看页面上三个“展开” anchor 元素的属性。还值得注意的是,我能够让我的代码在 w3schools test page 中运行。 .

可能还需要注意的是,我对 document.getElementsByName 的使用实际上确实输出(到控制台)一个元素数组,但是当我询问它的长度时,它告诉我 0。同样,如果我尝试访问一个正常使用 array_name[0] 的数组元素,它输出“未定义”,尽管当我将对象打印到控制台时,数组内部显然有一个元素。

有人知道为什么会这样吗?我只想遍历 DOM 元素,目前我正在避免使用 jQuery,因为我正在尝试使用 vanilla JavaScript 练习编码。

谢谢,

ParagonRG

最佳答案

与其说它是 JavaScript 的东西,不如说它是网络浏览器的东西。该 API 由 native 对象(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;这是一个语言中立的接口(interface)定义。

我想这个答案的简短版本是,“因为它确实如此。”

关于javascript - 为什么 JavaScript 的 getElementsByClassName 提供的对象不是数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11064562/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com