如何将for of循环输出的HTML元素ID存入数组？

你原代码里存在一个错误：循环中使用了elements.getAttribute("id")，但elements是querySelectorAll返回的NodeList元素集合，并非单个DOM元素，正确的做法是使用循环变量element（单数）来获取当前元素的ID。

要把所有ID存入数组，只需按以下步骤操作：

1. 提前声明一个空数组
2. 遍历元素时，将每个元素的ID添加到数组中
3. 循环结束后即可得到包含所有ID的数组

修正后的基础代码 #

const elements = document.querySelectorAll("button");
const idArray = []; // 初始化空数组
for (const element of elements) {
    const id = element.getAttribute("id"); // 用单个元素变量获取ID
    idArray.push(id); // 将ID推入数组
}

// 输出结果数组
console.log(idArray); // 打印: ["savebtn-1", "savebtn-2"]

更简洁的写法（可选） #

如果不想手动写for of循环，也可以用Array.from或扩展运算符配合map方法直接转换：

// 方法一：Array.from
const idArray = Array.from(document.querySelectorAll("button"), el => el.id);

// 方法二：扩展运算符+map
const idArray = [...document.querySelectorAll("button")].map(el => el.id);

console.log(idArray); // 同样输出: ["savebtn-1", "savebtn-2"]

内容的提问来源于stack exchange，提问作者C Dub