5

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?

James A Mohler
  • 11,060
  • 15
  • 46
  • 72
Big_Chair
  • 2,781
  • 3
  • 31
  • 58

1 Answers1

10

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.

Community
  • 1
  • 1
dsgriffin
  • 66,495
  • 17
  • 137
  • 137