Iterate over the childred of a tag

Question

I have this:

var thead = document.getElementById("my_table").getElementsByTagName("thead")[0];

// =>
<thead>
  <tr>
    <th ....
    <th ....
    <th ....

Now how can I select or find " th " by index? thead.children[0] returns the whole "tr", thead.children[0][0] is undefined. How can I reach "th" nodes?

Answer 1

You may use element's children property to access element's children:

var thead = document.getElementById("my_table").getElementsByTagName("thead")[0].children[0].children;

which means

In my_table find the thead tag, get its first children ( tr ) and return the array of its children

Now, you will be able to iterate through them:

for (var i = 0; i < thead.length; i++)
{
    console.log(thead[i]);
}

The more convenient way is to use querySelectorAll and CSS selectors:

var thead = document.querySelectorAll('#my_table > thead > tr > th');
for (var i = 0; i < thead.length; i++)
{
    console.log(thead[i]);
}

Here is the working JSFiddle demo .