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 ？

按下按钮时

预期输出：

alert: main
alert: content

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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/

javascript onclick获取div id？

3 个答案: