javascript - getElementsByTagName("table") - getting td on curious way - Stack Overflow

admin管理员组

文章数量:1310143

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?

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?

• javascript
• html
• html-table

Share Improve this question Follow edited Oct 6, 2013 at 19:31 James A Mohler 11.1k1515 gold badges5050 silver badges7676 bronze badges asked Jul 17, 2013 at 16:12 Big_ChairBig_Chair 3,23933 gold badges3535 silver badges6767 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptgetElementsByTagName(quottablequot)getting td on curious wayStack Overflow