getElementsByTagName("table") - 以好奇的方式获得td

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>元素的原因,请参阅此问题及其答案.