如何遍历表单提交后动态创建的div元素？

问题场景 #

每次提交表单时，会向父div中追加带有new-Div类的新div元素，但尝试用for of循环遍历时提示不可迭代，示例代码如下：

const parentDiv = document.querySelector("div")

form.addEventListener("submit", function formSubmit(e) {
    e.preventDefault()
    let newDiv = document.createElement("div")
    newDiv.classList.add("new-Div")
    parentDiv.append(newDiv) 
})

解决方案 #

出现不可迭代的报错，通常是因为你尝试遍历单个DOM元素（比如直接遍历parentDiv），而不是可迭代的元素集合。下面是几种靠谱的解决方式：

1. 用querySelectorAll直接获取目标元素并遍历

document.querySelectorAll('.new-Div')会返回所有带new-Div类的元素组成的NodeList，现代浏览器中它已经实现了可迭代接口，直接用for of就能遍历：

// 获取所有动态创建的div
const allNewDivs = document.querySelectorAll('.new-Div');

// 遍历处理每个元素
for (const div of allNewDivs) {
  // 这里写你的处理逻辑，比如修改内容、绑定事件等
  console.log('处理动态div:', div);
}

2. 兼容旧浏览器：将NodeList转为数组遍历

如果需要兼容一些不支持NodeList可迭代的旧浏览器，可以把它转为数组，再用熟悉的数组遍历方法：

// 方法一：使用Array.from
const allNewDivs = Array.from(document.querySelectorAll('.new-Div'));
// 方法二：使用扩展运算符
// const allNewDivs = [...document.querySelectorAll('.new-Div')];

// 用forEach遍历
allNewDivs.forEach(div => {
  console.log('处理动态div:', div);
});

// 或者继续用for of
for (const div of allNewDivs) {
  // 处理逻辑
}

3. 遍历父元素的子节点并过滤

如果不想用选择器，也可以直接遍历父div的子元素，再过滤出带new-Div类的元素：

const parentDiv = document.querySelector("div");

for (const child of parentDiv.children) {
  // 只处理带有new-Div类的子元素
  if (child.classList.contains('new-Div')) {
    console.log('处理动态div:', child);
  }
}

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