为什么最后使用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]？

回答

目的

击穿

之前

后

相关问题