Question

我有这个简单的例子

 <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];

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

Answer 1

那是因为你忘记了<tbody>元素，它会自动插入到DOM中。

你的桌子看起来是什么样的：

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

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

附注： 如果您想了解更多有关<tbody>元素在未声明的情况下自动注入<table>元素的原因， see this question and its answers

getElementsByTagName（“table”） - 以好奇的方式获得td

1 个答案: