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>したがって、必要な要素をターゲットにするために、3 つのレベルの子を掘り下げる必要があったのはなぜですか。

補足:要素が宣言されていない場合<tbody>に要素が自動的に要素に挿入される理由について詳しく知りたい場合は、この質問とその回答を参照してください。<table>

于 2013-07-17T16:13:53.813 に答える