5

我有这个简单的例子

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

我想获得（第一个）tr 元素的第一个 td 元素，我尝试了：

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

因为它是：

  • var td = document.getElementsByTagName("table")[0]对于表格元素本身
  • children[0]对于 tr 元素
  • 再次children[0]为第一个 td 元素

这就是我的想法，但显然这返回了 tr 元素，只有添加另一个元素才能.children[0]让我获得 td 元素。

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

为什么会这样，或者我在这里错过了什么？

4

1 回答 1

10

那是因为您忘记了<tbody>自动插入到 DOM 中的元素。

你的桌子看起来像什么：

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

因此，为什么您需要深入挖掘三个子级来定位<td>您想要的元素。

旁注：如果您想了解更多关于如果未声明<tbody>元素会自动注入元素的原因，请参阅此问题及其答案。<table>

于 2013-07-17T16:13:53.813 回答