如何在JavaScript循环中为div子节点设置id属性？代码问题排查

原代码存在的问题： #

• 循环越界：document.getElementById("demo").children仅包含1个元素（即id为show的div），但循环条件写了i <=5，i从0到5会访问不存在的元素，直接触发报错。
• lastChild误取文本节点：HTML中的换行、空格会被解析为文本节点，lastChild拿到的不是目标showtimes元素，需用lastElementChild获取最后一个子元素节点。
• 直接给集合设id无效：children是元素集合而非单个元素，不能直接给collection[i].lastChild.children.id赋值，必须遍历集合内的每个子元素。
• id重复违规：原代码将多个元素id设为show、showtimes，但HTML要求id必须唯一，这不符合规范。
• 循环变量未声明：i未用let声明，会成为全局变量，容易引发意外问题。

修正后的代码 #

方案1：直接定位showtimes后遍历子元素

// 获取目标showtimes元素
const showtimes = document.getElementById("showtimes");
// 遍历子元素，给每个时间节点设置唯一id
Array.from(showtimes.children).forEach((item, index) => {
  item.id = `timings-${index + 1}`;
});

方案2：适配demo下有多个show块的场景

const demoChildren = document.getElementById("demo").children;
// 遍历demo下的每个show块
for (let i = 0; i < demoChildren.length; i++) {
  const showBlock = demoChildren[i];
  // 精准定位当前块内的showtimes元素
  const showtimes = showBlock.querySelector("#showtimes");
  if (showtimes) {
    // 为每个时间节点设置带层级的唯一id
    Array.from(showtimes.children).forEach((timeItem, idx) => {
      timeItem.id = `timings-${i + 1}-${idx + 1}`;
    });
  }
}

说明 #

• id必须唯一，因此给每个时间节点设置带序号的id（如timings-1、timings-2），避免重复冲突。
• 使用querySelector或lastElementChild可精准获取目标元素，避开文本节点干扰。
• 用Array.from()把HTMLCollection转为数组，确保所有浏览器都能使用forEach方法（部分浏览器原生支持集合的forEach，转数组兼容性更优）。

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