如何获取指定div下所有input的值并判断所属col容器（含Firebase动态添加）

没问题，我来帮你搞定这个需求！先说说你之前代码的问题，再给出完整的实现方案：

原代码的问题分析 #

1. 选择器错误：你用的.div > .col无法匹配到目标元素，因为col1/col2是嵌套在.row里面的，并不是.div的直接子元素，所以这个选择器找不到任何input。
2. 错误访问NodeList的value：document.querySelectorAll()返回的是一个NodeList（节点集合），它本身没有.value属性，必须遍历集合里的每个input元素才能获取各自的值。

正确实现方案 #

方式1：一次性获取所有input的值及所属列 #

如果需要在某个时机（比如点击按钮时）一次性收集所有input的数据，可以用下面的代码：

// 选择目标容器#div下的所有input元素（不管是不是动态添加的，只要已渲染到DOM里就能选中）
const inputs = document.querySelectorAll("#div input");

// 遍历每个input进行处理
inputs.forEach(input => {
  const inputValue = input.value;
  let columnType = "";

  // 判断当前input属于col1还是col2容器
  const parentCol = input.parentElement;
  if (parentCol.classList.contains("col1")) {
    columnType = "col1";
  } else if (parentCol.classList.contains("col2")) {
    columnType = "col2";
  }

  // 这里可以替换成你需要的处理逻辑，比如存入数组、提交到数据库等
  console.log(`输入框值：${inputValue}，所属列：${columnType}`);
});

方式2：实时监听输入（适配动态添加的row） #

如果需要在用户输入时实时获取值，或者处理后续动态添加的row里的input，推荐用事件委托的方式，这样不用每次添加row后重新绑定事件：

// 给父容器绑定事件，监听所有input的输入行为
document.getElementById("div").addEventListener("input", function (e) {
  // 确保触发事件的元素是input
  if (e.target.tagName === "INPUT") {
    const input = e.target;
    const inputValue = input.value;
    let columnType = "";

    // 用closest()方法向上查找最近的col1/col2容器（比parentElement更灵活，即使结构变化也能适配）
    if (input.closest(".col1")) {
      columnType = "col1";
    } else if (input.closest(".col2")) {
      columnType = "col2";
    }

    // 实时处理逻辑
    console.log(`实时输入值：${inputValue}，所属列：${columnType}`);
  }
});

关键知识点说明 #

• querySelectorAll("#div input")：会选中#div容器内所有层级的input，不管row是静态还是动态添加的，只要元素已经渲染到DOM中就能被选中。
• parentElement：获取input的直接父容器（也就是col1/col2的div），适合结构固定的场景。
• closest(".col1")：向上遍历DOM树，找到最近的带有col1类的元素，比parentElement更健壮，如果后续DOM结构调整（比如input外面多套了一层元素），这个方法依然能生效。

内容的提问来源于stack exchange，提问作者A4dev Spirit inc