getElementsByTagName("table") - getting td on curious way

Question

I have this simple example

 <table border="1px">
  <tr> 
    <td> </td>
    <td> <input type="button" value="Click" onclick="insertText()"/> </td>
  </tr>
 </table>

I wanted to get the first td element of the (first) tr element, I tried:

var td = document.getElementsByTagName("table")[0].children[0].children[0];

Because it's:

• var td = document.getElementsByTagName("table")[0] for the table element itself
• children[0] for the tr element
• and children[0] again for the first td element

That's what I thought, but apparently this returns me the tr element and only adding another .children[0]got me the td element.

var td = document.getElementsByTagName("table")[0].children[0].children[0].children[0];

Why is that, or what have I missed here?

Answer 1

That's because you're forgetting about the <tbody> element, which is automatically inserted into the DOM.

What your table really looks like:

<table border="1px">
  <tbody>
    <tr> 
      <td> </td>
      <td> <input type="button" value="Click" onclick="insertText()"/> </td>
    </tr>
  </tbody>
</table>

Hence why you needed to dig down through three levels of children to target the <td> element you wanted.

Side note: If you'd like to know more about why the <tbody> element is automatically injected into <table> elements if undeclared, see this question and its answers.