javascript - 如何使用 Javascript 创建具有特定自定义数据属性的 div 数组

Question

我在一个页面上有一堆 div，它们有一个“数据类型”的自定义数据属性

<div id="155544" data-type="form" data-form-id="155544">

<div data-type="question" data-question-id="119709" data-mandatory="True"></div>
<div data-type="question" data-question-id="119710" data-mandatory="True"></div>

</div>


<div id="155554" data-type="form" data-form-id="155554">

<div data-type="question" data-question-id="119711" data-mandatory="True"></div>
<div data-type="question" data-question-id="119712" data-mandatory="True"></div>

</div>

这基本上是代码，我只是取出了实际内容以避免混淆。

我想使用 Javascript 来找出有多少 div 具有“表单”的数据类型，以便我对它们做一些事情。

我发现这个Hide or show all divs for a certain value of a data attribute这与我想做的类似，除了我试图不使用 jQuery。

有什么解决办法吗？

编辑：我还应该提到我试图不直接使用 div“id”，因为它们是动态创建的

Answer 1

如果不使用 JQuery，您可能会使用querySelectorAll

elementList = document.querySelectorAll('div[data-type="form"]');

演示（打印他们的号码）

Answer 2

您可以使用querySelectorAll MDN获取 Nodelist，如果需要，您可以将其转换为数组（以及类似 的松散物品.namedItem()）：

var divs = document.querySelectorAll('div[data-type="form"]');
var arrayOfDivs = Array.prototype.slice.apply(divs,[0]);