javascript - 一道js練習(xí)題，為什么這里最后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>
這個實現(xiàn)效果是一個表格中，最后一列添加刪除的效果，我搞不懂，createElement創(chuàng)建了a標(biāo)簽添加刪除功能之后，為什么 oTd.getElementsByTagName(’a’)[0].onclick=function() 這里面TagName選的是[0]，不是每一次都會創(chuàng)建一個a標(biāo)簽來觸發(fā)js么。 為什么不是做個for循環(huán)給每個a來加onclick
問題解答
回答1：![javascript - 一道js練習(xí)題，為什么這里最后getElementsByTagName(’a’)[0]是0](http://www.aoyou183.cn/attached/image/news/202303/105603eedb.png)
這是慕課網(wǎng)上JS的課程吧 ’oTd’本來就是 oBtn.onclick之后才會創(chuàng)建的元素 這里面的a元素當(dāng)然也是新建的;為何還總是要用[0]? 因為getElementsTagName(’a’)返回的是一個元素list 即使長度只有1 也要用[0]或者.item(0)來拿到這個DOM元素
回答3：![javascript - 一道js練習(xí)題，為什么這里最后getElementsByTagName(’a’)[0]是0](http://www.aoyou183.cn/attached/image/news/202303/10560435d5.png)
通過你的代碼可知，此時的oTd是用來存放刪除鏈接的td元素，設(shè)置完innerHTML屬性之后，此時的td元素為<td><a href=’javascript:’>刪除</a></td>；oTd.getElementsByTagName(’a’)的返回值是該td元素（限定了選擇范圍，就是從包含這個a元素的父元素td中選擇，而不是table元素）中包含的a元素組成的數(shù)組，因為該td元素只包含一個a元素，所以結(jié)果是長度為1的數(shù)組，要獲取這個a元素，當(dāng)然是取結(jié)果的[0]了（數(shù)組下標(biāo)從0開始）；
可以用一個for循環(huán)來添加onclick事件，你可以在每次執(zhí)行完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元素注冊了點擊事件；當(dāng)你第二次點擊添加的時候，因為第一條信息已經(jīng)有點擊事件了，為什么還要再覆蓋一次點擊事件呢？你只需要給新添加的元素注冊點擊事件就可以了啊。
回答4：動態(tài)創(chuàng)建的element元素是無法綁定click事件的，用使用到on或者bind。
網(wǎng)公網(wǎng)安備