如何在<div>中获取不同元素的所有id属性？

Question

让我们假设我的网页上我有一个<div>里面,如不同的标签<p>,<label>,<span>和任何,他们都具有独特的id属性.在javascript上,我怎样才能获得里面元素的id <div>？

例如:

<div id = "cont">

<p id = '0001'>
Prod One
</p>

<label id = '0002'>
Prod Two
</label>


<p id = '0003'>
Prod Three
</p>


<span id = '0004'>
Prod Four
</span>


</div>

<button onclick = 'getIDsInsideDiv()'>Get The ID of the elements inside the div </button>

如果我要点击按钮,它将输出:

0001, 0002, 0003, 0004

Answer 1

尝试querySelectorAll基于CSS样式选择器执行查询.

在这里,我将使用#cont [id]具有id属性的属性的所有元素#cont.

var elements = document.querySelectorAll('#cont [id]'),
    ids = Array.prototype.map.call(elements, function(element) {
        return element.id;
    });

请记住,这是对下面元素的递归搜索#cont.如果您不想检索嵌套元素(即,您只想要直接的孩子),请使用#cont > [id].

我在Array.prototype.map.call这里使用,因为NodeList返回的querySelectorAll是像一个数组,但没有像这样的方法map().请参阅NodeList - 为什么NodeList不是数组？

JSFiddle演示~ http://jsfiddle.net/qykfv6Lp/