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，显然取决于浏览器，另请参见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');

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