如何遍历共享同一类名的div元素并为其添加唯一ID？

我有一组共享类名但无独立ID的div元素，它们在HTML中的显示顺序至关重要，必须予以保留。我需要通过document.getElementsByClassName(className);获取元素列表，循环为每个元素添加形如"tile-1" "tile-2"等格式的唯一ID。

我原本认为以下代码可行，但很快发现无法正常运行：

const getTiles = document.getElementsByClassName(tileClass);
  let n = 1;
  for (e in getTiles){
    let i = "tile-" + n;  
    e.setAttribute("id", i);
    n++;
}

我本以为只需为数组中的每个元素调用setAttribute即可，但实际并非如此。

你的代码失效的核心原因是：document.getElementsByClassName()返回的是HTMLCollection（类数组的DOM集合），而非普通数组。用for...in循环遍历它时，会遍历到集合的所有可枚举属性（比如length、item方法等），而非仅遍历DOM元素；且循环变量e是属性名字符串，不是DOM元素对象，自然无法调用setAttribute方法。

方案1：普通for循环（兼容性最好） #

利用HTMLCollection的length属性和索引访问，按顺序遍历每个元素：

const getTiles = document.getElementsByClassName(tileClass);
let n = 1;
for (let i = 0; i < getTiles.length; i++) {
  const tile = getTiles[i];
  tile.setAttribute("id", `tile-${n}`);
  n++;
}

方案2：转数组后用forEach遍历（写法更简洁） #

将HTMLCollection转换为普通数组，再用forEach遍历，可直接利用索引参数生成序号：

const getTiles = document.getElementsByClassName(tileClass);
Array.from(getTiles).forEach((tile, index) => {
  tile.setAttribute("id", `tile-${index + 1}`);
});

也可以用扩展运算符快速转数组：

const getTiles = document.getElementsByClassName(tileClass);
[...getTiles].forEach((tile, index) => {
  tile.setAttribute("id", `tile-${index + 1}`);
});

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