当使用纯JavaScript时，如何获取div或锚标签的ID

Question

我想通过单击获取<div>或<a>的ID。 请帮忙...

<div class="reccl" id="allact"><a href="#" class="a" id="b">All Activities</a></div>
<div class="reccl" id="lgns"><a href="#" class="a" id="bb">Logins</a></div>
<div class="reccl" id="dwld"><a href="#" class="a" id="bb">Download</a></div>

JavaScript代码：

 var a = document.getElementsByClassName('a');
     for(var b = 0; b <= a.length; b++){
        a[i].onclick = function(e){
            alert("id clicked");
        }
     }

此处的代码： http：// jsfiddle：％20http：//jsfiddle.net/mm07p5rz/

Answer 1

只需获取click事件的target对象的id属性即可。 顺便说一句， id在文档中应该是唯一的。

这将获得在页面上单击的任何元素的id ：

 document.addEventListener("click", function(evt){ console.log(evt.target.id); }); 

 <div class="reccl" id="allact"><a href="#" class="a" id="b">All Activities</a></div> <div class="reccl" id="lgns"><a href="#" class="a" id="bb">Logins</a></div> <div class="reccl" id="dwld"><a href="#" class="a" id="bbb">Download</a></div> 

这将获得单击的任何<a>元素的id 。 您可以随意过滤特定元素，但是获取id的过程是相同的：

 // Get just and <a> elements var anchors = document.querySelectorAll("a"); // Set up a click event listener for each one for(var i = 0; i < anchors.length; i++){ anchors[i].addEventListener("click", function(evt){ console.log(evt.target.id); }); } 

 <div class="reccl" id="allact"><a href="#" class="a" id="b">All Activities</a></div> <div class="reccl" id="lgns"><a href="#" class="a" id="bb">Logins</a></div> <div class="reccl" id="dwld"><a href="#" class="a" id="bbb">Download</a></div> 

Answer 2

我编辑您的源代码

 var a = document.getElementsByClassName('reccl'); for (var b = 0; b < a.length; b++) { a[b].onclick = function(e){ //get child's id in element alert(e.target.id); //get element's id alert(e.currentTarget.id); } } 

 <div class="reccl" id="allact"><a href="#" class="a" id="b">All Activities</a></div> <div class="reccl" id="lgns"><a href="#" class="a" id="bb">Logins</a></div> <div class="reccl" id="dwld"><a href="#" class="a" id="bb">Download</a></div>