How does JavaScript store DOM elements in variables? - Stack Overflow

What I mean is how does JavaScript store DOM elements when you do something like:

var foo = document.getElementsByTagName('p');

what does foo bee? 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?

What I mean is how does JavaScript store DOM elements when you do something like:

var foo = document.getElementsByTagName('p');

what does foo bee? 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?

• javascript
• dom

Share Follow edited Jun 20, 2013 at 13:34 Samuel Lopez asked Jun 19, 2013 at 21:38 Samuel LopezSamuel Lopez 2,39077 gold badges2929 silver badges3939 bronze badges 3

• use getElementsByTagName() instead of getElementsByName() – Givi Commented Jun 19, 2013 at 21:40
• What would be the difference between using TagName and Name? – Samuel Lopez Commented Jun 19, 2013 at 21:44
• 1 The getElementsByTagName() method accesses all elements with the specified tagname, and getElementsByName() method accesses all elements with the specified name. tagname is html element tag name such as <div> or <p> and name is attribute such as <div name="somename"> – Givi Commented Jun 19, 2013 at 21:46

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

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).

Even though it is an array-like object, i.e. it has numeric properties and a .length property, you cannot add new elements to it.

In order to modify the NodeList, you have to convert it to a regular array. This can easily be achieved with the array method .slice and at the same time you can merge both lists with .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:

• 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.

bar =+ foo;

this works only for string concatenation and it would be 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.

e.g.,

var myArray =[]
myArray.push(foo);
myArray.push(bar);

foo bees 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:

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.