我正在尝试从父容器中获取所有按钮 id 并始终获取最后一个答案

【问题标题】：I'm Trying to get all button id's from a parent container and always get the last one我正在尝试从父容器中获取所有按钮 id 并始终获取最后一个
【发布时间】：2019-01-16 20:21:57
【问题描述】：

我正在尝试从父容器中获取来自子级的所有 id 的列表，并且我一直只获取最后一个 id。如何获取具有所有 Id 的数组或字符串？这些按钮将由 PHP 动态创建，所以我实际上不知道那里会有什么 id。

var childDivs = document.getElementById('onlineDrop').getElementsByTagName('button');
for (var i = 0; i < childDivs.length; i++) { 
childDiv = childDivs[i].id;
}
alert(childDiv);

<div id="onlineDrop">
<button id="222222"></button>
<button id="333333"></button>
<button id="444444"></button>
</div>

请不要使用 Jquery。提前致谢。

【问题讨论】：

@Barmar 的解决方案看起来不错，可以创建一个 id 数组。作为一件额外的事情，是否正在尝试动态地将事件侦听器添加到这些按钮？几年前我有一个类似的项目（使用 vanilla JS 和 php）并且在将侦听器添加到按钮时遇到了麻烦，因为它只是将它添加到最后一个按钮。我找到了解决方案。如果您需要这方面的帮助，请告诉我..

标签： javascript html arrays for-loop

【解决方案1】：

将 ID 添加到数组中。

var childDivs = document.getElementById('onlineDrop').getElementsByTagName('button');
childIds = [];

for (var i = 0; i < childDivs.length; i++) {
  childIds.push(childDivs[i].id);
}
console.log(childIds);

<div id="onlineDrop">
  <button id="222222"></button>
  <button id="333333"></button>
  <button id="444444"></button>
</div>

【讨论】：

谢谢你，这正是我想要的。

【解决方案2】：

另一种方法是使用数组的Array.from() 方法：

var childDivs = document.getElementById('onlineDrop').getElementsByTagName('button');

let ids = Array.from({length: childDivs.length}, (v, i) => childDivs[[i]].id);

console.log(ids);

<div id="onlineDrop">
<button id="222222">B1</button>
<button id="333333">B2</button>
<button id="444444">B3</button>
</div>

【讨论】：