javascript onclick获取div id？

Question

是否可以使用javascript点击按钮获取2个div标签的ID？

<div id="main">
<div id="content">
</div>
<button onclick="function();">show it</button>
</div>

我这里有2个div标签。 第一个div位于主div中，而内容div位于主div内，按钮也位于主div内。

是否可以在单击按钮时获取2 div标签的主要 ID和内容 ID？

按下按钮时的预期输出：

 alert: main alert: content 

Answer 1

您需要将元素传递给函数。 然后，您可以使用parentNode获取包含该按钮的DIV 。 从那里，您可以使用querySelector查找父级中的第一个DIV 。

 function showIt(element) { var parent = element.parentNode; alert(parent.id); var content = parent.querySelector("div"); alert(content.id); } 

 <div id="main"> <div id="content"> </div> <button onclick="showIt(this);">show it</button> </div> <div id="main2"> <div id="content2"> </div> <button onclick="showIt(this);">show it</button> </div> <div id="main3"> <div id="content3"> </div> <button onclick="showIt(this);">show it</button> </div> 

Answer 2

这应该适用于所有浏览器并使用更干净的.id方法。

 var button = document.getElementById('button'); button.onclick = getIDs; function getIDs(){ var id,divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { id = divs[i].id // .id is a method alert(id); } } 

 <div id="main"> <div id="content"></div> <button id="button">show it</button> </div> 

Answer 3

document.getElementById('button').onclick = function () {
    var divs = document.querySelectorAll('div');
    for (var i = 0; i < divs.length; i++) {
        var id = divs[i].getAttribute('id');
        alert(id);
    }
};

http://jsfiddle.net/jm5okh69/1/