getElementsByTagName("table") - getting td on curious way
html, html-table, javascript
Solution
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.
Problem
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?