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));

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

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

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

Answer 2

bar = + foo;

这仅适用于字符串连接，它将是bar+= foo

但这里的bar和foo都是DOM对象。 所以如果你想添加相同类型的元素，你可以创建一个数组。

例如，

var myArray =[]
myArray.push(foo);
myArray.push(bar);

Answer 3

foo成为了这个功能。 因此，您无法将foo添加到bar，因为这没有意义。 这就像试图做：

document.form[0].getElementsByName('input') document.form[1].getElementsByName('input');

您可以在单个数组中包含多个元素。 我发现这是达到解决方案的最简单方法。