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，具体取决于浏览器，请参阅还Difference between HTMLCollection, NodeLists, and arrays of objects）。

即使它是类似数组的对象，即它具有数字属性和.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');

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

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

3 个答案: