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