childNodes on <tr> has weird stuff in it, tripping me up

Question

<tr id='tt_info_entry_2'>
  <th colspan=3>Read sigma[0]</th> 
  <th colspan=3>Read sigma[1]</th> 
</tr>

But in Chrome I get:

Note mysterious "Text" objects getting in the way of my for loop. There's three of them too. (only two <th>'s)

What's this?

P.S. I will use getElementsByTagName('th') on the <tr> to get a clean array. But still, I didn't have these weird text thingies pop up when I was doing all sorts of ninja stuff with divs. I can has explanation?

Answer 1

Whitespaces are also textNodes. There are whitespaces before the 1st TH,after the 1st TH and after the 2nd TH (the line-breaks).

Use Element.children instead of Element.childNodes to retrieve only element-nodes.

Answer 2

When it comes to table rows and cells, you should use:

• table.rows^[docs]
• row.cells The MDN docs link for .cells is broken right now, but as @Šime Vidas noted, it is listed on this MDN page.

They have wide browser support, and eliminate text node issues.

These give you browser compatibility back to Firefox 3 and avoids some quirks IE8 and lower have with .children.