爲什麼最後使用getElementsByTagName（「a」）[0]？

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    \t <meta charset="UTF-8"> 
 
    \t <title>Document</title> 
 
    \t <script> 
 
    \t \t window.onload=function() 
 
    \t \t { 
 
    \t \t \t var oTab = document.getElementById('tab1'); 
 
    \t \t \t var oName = document.getElementById('name'); 
 
    \t \t \t var oAge = document.getElementById('age'); 
 
    \t \t \t var oBtn = document.getElementById('btn'); 
 
    \t \t \t var id = oTab.rows.length+1; 
 
    \t \t \t oBtn.onclick=function() 
 
    \t \t \t { 
 
    \t \t \t \t var oTr = document.createElement('tr'); 
 
    \t \t \t \t var oTd = document.createElement('td'); 
 
    \t \t \t \t oTd.innerHTML = id++; 
 
    \t \t \t \t oTr.appendChild(oTd); 
 
    
 
    \t \t \t \t var oTd = document.createElement('td'); 
 
    \t \t \t \t oTd.innerHTML =oName.value; 
 
    \t \t \t \t oTr.appendChild(oTd); 
 
    
 
    
 
    \t \t \t \t var oTd = document.createElement('td'); 
 
    \t \t \t \t oTd.innerHTML = oAge.value ; 
 
    \t \t \t \t oTr.appendChild(oTd); 
 
    
 
    
 
    \t \t \t \t var oTd = document.createElement('td'); 
 
    \t \t \t \t oTd.innerHTML = "<a href='javascript:'>刪除</a>" ; 
 
    \t \t \t \t oTr.appendChild(oTd); 
 
    
 
    \t \t \t \t oTd.getElementsByTagName('a')[0].onclick=function() 
 
    \t \t \t \t { 
 
    \t \t \t \t \t oTab.tBodies[0].removeChild(this.parentNode.parentNode); 
 
    \t \t \t \t } 
 
    \t \t \t \t 
 
    
 
    \t \t \t \t oTab.tBodies[0].appendChild(oTr); 
 
    
 
    
 
    \t \t \t } 
 
    \t \t } 
 
    \t \t 
 
    \t </script> 
 
    </head> 
 
    <body> 
 
    \t 姓名：<input id="name" type="text" /> 
 
    \t 班級：<input id="age" type="text" /> 
 
    \t <input id="btn" type="button" value='添加' /> 
 
    \t <table id="tab1" border="1px" width="600px"> 
 
    \t \t <tHead> 
 
    \t \t \t <td>1</td> 
 
    \t \t \t <td>2</td> 
 
    \t \t \t <td>3</td> 
 
    \t \t \t <td>操作</td> 
 
    \t \t </tHead> 
 
    \t \t <tbody> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>2</td> 
 
    \t \t \t \t <td>22</td> 
 
    \t \t \t \t <td>33</td> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>3</td> 
 
    \t \t \t \t <td>22</td> 
 
    \t \t \t \t <td>33</td> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>4</td> 
 
    \t \t \t \t <td>22</td> 
 
    \t \t \t \t <td>33</td> 
 
    \t \t \t \t <td></td> 
 
    \t \t \t </tr> 
 
    \t \t </tbody> 
 
    \t </table> 
 
    </body> 
 
    </html>

我不理解，的createElement創建的標籤，其被選擇添加刪除功能，爲什麼oTd.getElementsByTagName（ 'A'）[0] = .onclick功能（型）標記名[0] ，不是每次創建一個標籤來觸發js。爲什麼不做一個循環爲每一個加入的onclick

來源

2017-06-16 hope

因爲只有一個'那個元素了'元素。就個人而言，我只是創建一個元素，而不是使用innerHTML，它不會查找。 – epascarello

所以在創建一個a後，需要使用for循環來添加onclick？ – hope

沒有循環添加onclick ...不確定你的評論意味着什麼。單元格中有一個新的錨點，所以代碼選擇錨點並向其添加一個onclick。由於該方法返回一個HTML集合，而不僅僅是一個元素，因此代碼需要使用括號表示來獲取第一個索引。 – epascarello

目的

代碼的目的是一個單擊處理程序添加到被創建的每個<a>元素。點擊<a>時，將刪除作爲function正文部分的行。

   var oTd = document.createElement('td'); 
       oTd.innerHTML = "<a href='javascript:'>Delete</a>" ; 
       oTr.appendChild(oTd); 

       oTd.getElementsByTagName('a')[0].onclick=function() 
       { 
        oTab.tBodies[0].removeChild(this.parentNode.parentNode); 
       }

你可以更換innerHTML有更明確的createElement。

   var oTd = document.createElement('td'); 
       var anchor = document.createElement('a'); 
       anchor.textContent = "Delete"; 

       oTd.appendChild(anchor); 
       oTr.appendChild(oTd); 

       anchor.onclick = function() { 
        oTab.tBodies[0].removeChild(this.parentNode.parentNode); 
       }

擊穿

我們可以改變下面一行成多行並解釋各步驟。

之前

oTd.getElementsByTagName('a')[0].onclick=function() { alert('Clicked!') };

後

// Get all child <a> elements 
var anchorElements = oTd.getElementsByTagName('a'); 

// Get the first <a> element 
var a = anchorElements[0]; 

// Attach a click event handler to the element 
a.onclick = function() { alert('Clicked!') };

來源

2017-06-16 15:31:30 styfle

你想問一下頂端的評論不能被接受嗎？不要使用^ _ ^ – hope

爲什麼最後使用getElementsByTagName（「a」）[0]？

回答

目的

擊穿

之前

後

相關問題