从HTMLCollection中提取div并获取其id组成数组

你可以通过**映射（map）**元素数组来提取每个元素的id属性，以下是几种实用写法：

方法1：基于现有代码改造 #

const projects = [...document.getElementsByClassName("nav-project")];
const projectIds = projects.map(item => item.id);
console.log(projectIds); 
// 输出: ["one", "two", "three", "four", "five"]

方法2：简洁链式写法 #

直接将元素集合转成数组后链式调用map：

const projectIds = [...document.getElementsByClassName("nav-project")].map(el => el.id);
console.log(projectIds);

方法3：使用querySelectorAll #

querySelectorAll返回NodeList，转成数组后同样可以提取id：

const projectIds = [...document.querySelectorAll(".nav-project")].map(el => el.id);
console.log(projectIds);

说明 #

• getElementsByClassName返回的是HTMLCollection类数组对象，需要用扩展运算符[...]转成真正的数组才能使用map方法。
• map方法会遍历数组中的每个元素，提取其id属性并返回新数组，完全匹配你需要的结果格式。

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