JavaScript 如何将 DOM 元素存储在变量中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17201832/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does JavaScript store DOM elements in variables?
提问by Samuel Lopez
What I mean is how does JavaScript store DOM elements when you do something like:
我的意思是当您执行以下操作时 JavaScript 如何存储 DOM 元素：
var foo = document.getElementsByTagName('p');
what does foo become? an array of objects? and how can I add more elements to that variable, for example:
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
}
Is it possible to add more elements of the same type to a variable that already has elements in it? Do I have to loop trough all elements in the variable I want to add and "push" them in the variable I want all the data in?
是否可以将更多相同类型的元素添加到已包含元素的变量中？我是否必须循环遍历我想添加的变量中的所有元素并将它们“推送”到我想要所有数据的变量中？
回答by Felix Kling
getElementsByTagName(and similar methods such as getElementsByName, getElementsByClassName, etc) returns a NodeList(or HTMLCollection, depending on the browser apparently, see also Difference between HTMLCollection, NodeLists, and arrays of objects).
getElementsByTagName（以及类似的方法，例如getElementsByName，getElementsByClassName等）返回一个NodeList（或HTMLCollection，根据不同的浏览器上显然，也参见的HTMLCollection，的NodeLists，和对象的阵列之间的差异）。
Even though it is an array-likeobject, i.e. it has numeric properties and a .lengthproperty, you cannot add new elements to it.
即使它是一个类似数组的对象，即它具有数字属性和一个.length属性，您也不能向其添加新元素。
In order to modify the NodeList, you have to convert it to a regular array. This can easily be achieved with the array method .sliceand at the same time you can merge both lists with .concat:
为了修改NodeList，您必须将其转换为常规数组。这可以通过数组方法轻松实现，.slice同时您可以将两个列表合并为.concat：
bar = Array.prototype.slice.call(bar).concat(Array.prototype.slice(foo));
This works because most native array methods are defined in such a way that the argument does not have to be an actually array, but an array-like object.
这是有效的，因为大多数本机数组方法的定义方式是参数不必是实际数组，而是类似数组的对象。
The noteworthy differences between a NodeListand the final array are:
aNodeList和最终数组之间值得注意的区别是：
- The array is not live anymore, i.e. the collection is not automatically updated when new DOM nodes are added.
- The elements in the final (merged) array won't necessarily be in document order.
- 数组不再存在，即当添加新的 DOM 节点时，集合不会自动更新。
- 最终（合并）数组中的元素不一定按文档顺序排列。
回答by Gokul Kav
bar =+ foo;
酒吧 =+ foo;
this works only for string concatenation and it would be bar+= foo
这仅适用于字符串连接，它将是 bar+= foo
but both bar and foo here are DOM objects. so if you want to add elements of the same type u can create an array.
但这里的 bar 和 foo 都是 DOM 对象。所以如果你想添加相同类型的元素，你可以创建一个数组。
e.g.,
例如，
var myArray =[]
myArray.push(foo);
myArray.push(bar);
回答by VinylScratch
foo becomes the function. So you wouldn't be able to add foo to bar because that doesn't make sense. It would be like trying to do:
foo 成为函数。所以你不能将 foo 添加到 bar ，因为那没有意义。这就像尝试做：
document.form[0].getElementsByName('input') document.form[1].getElementsByName('input');
You could have multiple elements in a single array. I'd find that to be the simplest way to reach your solution.
您可以在单个数组中包含多个元素。我会发现这是达到您的解决方案的最简单方法。
