javascript - js 연습 질문입니다. 여기서 마지막 getElementsByTagName('a')[0]이 0인 이유는 무엇입니까?

Question

으아악

이 구현의 효과는 테이블의 마지막 열을 추가하고 삭제하는 효과입니다. createElement가 a를 생성한 후에 oTd.getElementsByTagName('a')[0].onclick=function()이 이 작업을 수행하는 이유를 이해할 수 없습니다. 태그 추가 및 삭제 기능. 선택된 TagName은 js를 실행할 때마다 생성되는 태그가 아닌가요? 각각의 a에 onclick을 추가하기 위해 for 루프를 만들어 보는 것은 어떨까요

Answer 1

Answer 2

MOOC 온라인 JS 강좌입니다. 'oTd'는 원래 oBtn.onclick 이후에 생성된 요소입니다. 물론 그 안에 있는 a 요소도 새로 생성되었습니다.
왜 항상 getElementsTagName()을 사용하나요? 'a')는 요소 목록을 반환합니다. 길이가 1일지라도 이 DOM 요소를 얻으려면 여전히 [0] 또는 .item(0)을 사용해야 합니다

Answer 3

이때 oTd는 삭제 링크의 td 요소를 저장하는 데 사용되는 것을 코드에서 볼 수 있습니다. innerHTML 속성을 설정한 후 이때 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 요소입니다(제한된 선택 범위). 즉, 테이블 요소 대신 이 a 요소의 상위 요소 td에 포함된 요소의 배열을 선택합니다. td 요소에는 하나의 a 요소만 포함되므로 결과는 길이가 1인 배열입니다. 물론 이 요소를 얻으세요. 결과는 [0]입니다(배열 아래 첨자는 0부터 시작합니다).

for 루프를 사용하여 onclick 이벤트를 추가할 수 있습니다.

문을 실행할 때마다 oTab.tBodies[0].appendChild(oTr);를 사용할 수 있습니다. 으아악

하지만 문제는 처음으로 추가를 클릭하면 추가된 첫 번째 정보의 a 요소에 대해 클릭 이벤트가 등록된다는 것입니다. 두 번째로 추가를 클릭하면 첫 번째 정보에 이미 a 요소가 있기 때문입니다. 클릭 이벤트, 클릭 이벤트를 다시 덮어써야 하는 이유는 무엇입니까? 새로 추가된 요소에 대한 클릭 이벤트만 등록하면 됩니다.

Answer 4

동적으로 생성된 요소 요소는 클릭 이벤트에 바인딩할 수 없습니다. on 또는 바인딩을 사용해야 합니다.