Using getElementByClassName to build an object array

Question

I am using getElementsByClassName to get a collection of tr.

I want to now iterate through the collection and get the value of a textbox in the tr.

I cannot use JQuery to do this or any other framework.

How can this be done?

var dom = document.getElementsByClassName('Row');
var arr = [];
var len = dom.length;
for (var i = 0; i < len; i++) {
   // foo = look up value of a text box in this row 
   // bar = look up value of a text box in this row 
   var obj = {
   quantity: foo,
   price: bar
   };
 arr.push(obj);
}

Link above is important to note, as getElementsByClassName is only from IE9 and onwards — MackieeE
– MackieeE, Commented Aug 24, 2013 at 8:28
Thanks, I am not actually using getElementsByClassName but put it in to simplify the example. I am using a YUI method that returns exactly the same thing @MackieeE @mu is too short — ojhawkins
– ojhawkins, Commented Aug 24, 2013 at 8:36

Spudley · Accepted Answer · 2013-08-24 09:22:53Z

2

Firstly, it's getElementsByClassName, with an 's' -- it can get more than one element, so its name is a plural.

Secondly, getElementsByClassName is not a function on it's own, it's a method on a DOM object.

If you want to get all elements in the document that match a given class name, you have to call document.getElementsByClassName(), not just getElementsByClassName() on its own.

So you need to do this:

var dom = document.getElementsByClassName('Row');

The elements within the dom object you get back from this also has the same methods available as the root document object, you can can call dom[i].getElementsByClassName(), etc.

For example, in order to get all the textarea elements within it, you could do dom[i].getElementsBtTagName('textarea').

That should help get you going.

edited Aug 24, 2013 at 9:22

answered Aug 24, 2013 at 6:24

Spudley

169k39 gold badges240 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ojhawkins Over a year ago

Apologies, you are correct & my mistake. How can I now look up a textbox in a tr when I iterate through the colllection @Spudley

Spudley Over a year ago

@ojhawkins - I've added a bit more to the answer, to try to help a bit more.

ojhawkins Over a year ago

Should I be able to use dom[i].getElementById('foo')? @Spudley

Spudley Over a year ago

yep, that would work too; any of the dom methods should work. (although specifically getElementById() would be less useful, since an ID is supposed to be unique on a page so it shouldn't be necessary to call by ID from here as the result would be the same as calling from document)

Collectives™ on Stack Overflow

Using getElementByClassName to build an object array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related