[英]How does JavaScript store DOM elements in variables?
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? foo变成了什么? an array of objects? 一个对象数组? and how can I add more elements to that variable, for example: 以及如何向该变量添加更多元素,例如:
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? 我是否必须循环遍及我想要添加的变量中的所有元素,并将它们“推”到我想要所有数据的变量中?
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-like object, ie it has numeric properties and a .length
property, you cannot add new elements to it. 尽管它是一个类似数组的对象,即它具有数字属性和.length
属性,但您无法向其中添加新元素。
In order to modify the NodeList
, you have to convert it to a regular array. 要修改NodeList
,必须将其转换为常规数组。 This can easily be achieved with the array method .slice
and at the same time you can merge both lists with .concat
: 这可以通过数组方法.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 NodeList
and the final array are: NodeList
和最终数组之间值得注意的差异是:
bar =+ foo; bar = + foo;
this works only for string concatenation and it would be bar+= foo
这仅适用于字符串连接,它将是bar+= foo
but both bar and foo here are DOM objects. 但这里的bar和foo都是DOM对象。 so if you want to add elements of the same type u can create an array. 所以如果你想添加相同类型的元素,你可以创建一个数组。
eg, 例如,
var myArray =[]
myArray.push(foo);
myArray.push(bar);
foo becomes the function. foo成为了这个功能。 So you wouldn't be able to add foo to bar because that doesn't make sense. 因此,您无法将foo添加到bar,因为这没有意义。 It would be like trying to do: 这就像试图做:
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. 我发现这是达到解决方案的最简单方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.