JavaScript如何在变量中存储DOM元素？

Question

我的意思是当你执行以下操作时,JavaScript如何存储DOM元素:

var foo = document.getElementsByTagName('p');

foo变成了什么？一个对象数组？以及如何向该变量添加更多元素,例如:

var bar = document.form[0].getElementsByTagName('input'); // 5 elements
var foo = document.form[1].getElementsByTagName('input'); // 4 elements

bar =+ foo;

for (i=0;i<bar.length;i++){
console.log(bar.value); // 9 logged values
}

是否可以向已经包含元素的变量添加更多相同类型的元素？我是否必须循环遍及我想要添加的变量中的所有元素,并将它们"推"到我想要所有数据的变量中？

Answer 1

getElementsByTagName(以及类似的方法,如getElementsByName,getElementsByClassName等)返回一个NodeList(或者HTMLCollection,显然,取决于浏览器,还可以参见HTMLCollection,NodeLists和对象数组之间的差异).

尽管它是一个类似数组的对象,即它具有数字属性和.length属性,但您无法向其中添加新元素.

要修改它NodeList,您必须将其转换为常规数组.这可以通过数组方法轻松实现,.slice同时您可以将两个列表合并为.concat:

bar = Array.prototype.slice.call(bar).concat(Array.prototype.slice(foo));

这是有效的,因为大多数本机数组方法的定义方式使得参数不必是实际数组,而是类似数组的对象.

a NodeList和最终数组之间值得注意的差异是:

• 该阵列不再存在,即添加新DOM节点时不会自动更新集合.
• 最终(合并)数组中的元素不一定按文档顺序排列.