6

我的意思是当您执行以下操作时，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
}

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

4

3 回答 3

9

getElementsByTagName（以及类似的方法，例如getElementsByName,getElementsByClassName等）返回 a NodeList（或者HTMLCollection，显然取决于浏览器，另请参见HTMLCollection、NodeLists 和对象数组之间的区别）。

即使它是一个类似数组的对象，即它有数字属性和一个.length属性，你也不能向它添加新元素。

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

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

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

NodeLista和 final 数组之间值得注意的区别是：

  • 该数组不再存在，即当添加新的 DOM 节点时集合不会自动更新。
  • 最终（合并）数组中的元素不一定按文档顺序排列。
于 2013-06-19T21:42:29.210 回答
1

酒吧 =+ 富；

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

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

例如，

var myArray =[]
myArray.push(foo);
myArray.push(bar);
于 2013-06-19T21:43:38.827 回答
-4

foo 成为函数。所以你不能将 foo 添加到 bar 因为那没有意义。这就像尝试这样做：

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

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

于 2013-06-19T21:40:53.760 回答