javascript - 一道js练习题，为什么这里最后getElementsByTagName(’a’)[0]是0
问题描述
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <script>window.onload=function(){ var oTab = document.getElementById(’tab1’); var oName = document.getElementById(’name’); var oAge = document.getElementById(’age’); var oBtn = document.getElementById(’btn’); var id = oTab.rows.length+1; oBtn.onclick=function() {var oTr = document.createElement(’tr’);var oTd = document.createElement(’td’);oTd.innerHTML = id++;oTr.appendChild(oTd);var oTd = document.createElement(’td’);oTd.innerHTML =oName.value;oTr.appendChild(oTd);var oTd = document.createElement(’td’);oTd.innerHTML = oAge.value ;oTr.appendChild(oTd);var oTd = document.createElement(’td’);oTd.innerHTML = '<a href=’javascript:’>删除</a>' ;oTr.appendChild(oTd);oTd.getElementsByTagName(’a’)[0].onclick=function(){ oTab.tBodies[0].removeChild(this.parentNode.parentNode);}oTab.tBodies[0].appendChild(oTr); }} </script></head><body> 姓名：<input type='text' /> 班级：<input type='text' /> <input type='button' value=’添加’ /> <table border='1px' width='600px'><tHead> <td>1</td> <td>2</td> <td>3</td> <td>操作</td></tHead><tbody> <tr><td>2</td><td>22</td><td>33</td><td></td> </tr> <tr><td>3</td><td>22</td><td>33</td><td></td> </tr> <tr><td>4</td><td>22</td><td>33</td><td></td> </tr></tbody> </table></body></html>
这个实现效果是一个表格中，最后一列添加删除的效果，我搞不懂，createElement创建了a标签添加删除功能之后，为什么 oTd.getElementsByTagName(’a’)[0].onclick=function() 这里面TagName选的是[0]，不是每一次都会创建一个a标签来触发js么。 为什么不是做个for循环给每个a来加onclick
问题解答
回答1：![javascript - 一道js练习题，为什么这里最后getElementsByTagName(’a’)[0]是0](http://www.haobala.com/attached/image/news/202303/105603eedb.png)
这是慕课网上JS的课程吧 ’oTd’本来就是 oBtn.onclick之后才会创建的元素 这里面的a元素当然也是新建的;为何还总是要用[0]? 因为getElementsTagName(’a’)返回的是一个元素list 即使长度只有1 也要用[0]或者.item(0)来拿到这个DOM元素
回答3：![javascript - 一道js练习题，为什么这里最后getElementsByTagName(’a’)[0]是0](http://www.haobala.com/attached/image/news/202303/10560435d5.png)
通过你的代码可知，此时的oTd是用来存放删除链接的td元素，设置完innerHTML属性之后，此时的td元素为<td><a href=’javascript:’>删除</a></td>；oTd.getElementsByTagName(’a’)的返回值是该td元素（限定了选择范围，就是从包含这个a元素的父元素td中选择，而不是table元素）中包含的a元素组成的数组，因为该td元素只包含一个a元素，所以结果是长度为1的数组，要获取这个a元素，当然是取结果的[0]了（数组下标从0开始）；
可以用一个for循环来添加onclick事件，你可以在每次执行完oTab.tBodies[0].appendChild(oTr);语句后，使用
var aArray = oTab.getElementsByTagName('a');for (var i = 0; i < aArray.length; i++) { aArray[i].onclick = function() {oTab.tBodies[0].removeChild(this.parentNode.parentNode); }}
但是问题是，你在第一个点击添加的时候，给第一条添加信息的a元素注册了点击事件；当你第二次点击添加的时候，因为第一条信息已经有点击事件了，为什么还要再覆盖一次点击事件呢？你只需要给新添加的元素注册点击事件就可以了啊。
回答4：动态创建的element元素是无法绑定click事件的，用使用到on或者bind。
网公网安备