我正在尝试使用 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 测试页面 http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementsbyname.
还值得注意的是,我对 document.getElementsByName 的使用实际上确实输出(到控制台)一个元素数组,但是当我询问其长度时,它告诉我 0。同样,如果我尝试使用访问数组元素array_name[0]
正常情况下,它输出“未定义”,尽管当我将对象打印到控制台时,数组内部显然存在一个元素。
有人知道为什么会这样吗?我只想循环遍历 DOM 元素,目前我正在避免使用 jQuery,因为我正在尝试使用普通 JavaScript 进行编码。
Thanks,
帕拉贡RG
与其说它是 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;这是一个与语言无关的接口定义。
我想这个答案的简短版本是“因为它就是这样”。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)