javascript - js の練習問題です。ここの最後の getElementsByTagName('a')[0] が 0 であるのはなぜですか?

Question

リーリー

この実装の効果は、テーブルの最後の列の追加と削除の効果です。理由がわかりません oTd.getElementsByTagName('a')[0].onclick=function( ) ここで選択された TagName は次のとおりです[0]. jsを起動するために毎回aタグを作成していませんか？ for ループを作成して、各 a に onclick

を追加してみてはいかがでしょうか?

Answer 1

Answer 2

これは MOOC オンライン JS コースです。「oTd」はもともと oBtn.onclick の後に作成される要素です。
なぜ常に getElementsTagName() を使用するのでしょうか。 'a ') は要素リストを返します。長さが 1 だけであっても、この DOM 要素を取得するには [0] または .item(0) を使用する必要があります

。

Answer 3

この時点の oTd は、innerHTML 属性を設定した後、削除リンクの td 要素を格納するために使用されていることがわかります。この時点の td 要素は
<td><a です。 href='javascript:' >Delete</a></td>; <td><a href='javascript:'>删除</a></td>；
oTd.getElementsByTagName('a')的返回值是该td元素（限定了选择范围，就是从包含这个a元素的父元素td中选择，而不是table元素）中包含的a元素组成的数组，因为该td元素只包含一个a元素，所以结果是长度为1的数组，要获取这个a元素，当然是取结果的[0]oTd.getElementsByTagName('a')戻り値は td 要素 (限定された選択範囲)つまり、table 要素ではなく、この a 要素の親要素 td に含まれる a 要素の配列を選択します)。 td 要素には a 要素が 1 つしか含まれていないため、結果は長さ 1 の配列になります。もちろんこれを要素として取得します。結果は [0] です (配列の添字は 0 から始まります)。

for ループを使用して onclick イベントを追加できます。

ステートメントを実行するたびに oTab.tBodies[0].appendChild(oTr); を使用できます。 リーリー

しかし、問題は、最初に追加をクリックしたときに、2 回目に追加をクリックしたときに、最初の情報にすでに が含まれているため、クリック イベントが追加された最初の情報の要素に対して登録されることです。クリック イベント、なぜクリック イベントを再度上書きする必要があるのでしょうか?新しく追加した要素のクリック イベントを登録するだけで済みます。

Answer 4

動的に作成された要素要素はクリック イベントにバインドできません。on または binding を使用する必要があります。