JS获取多个input标签name属性失败，单个标签可正常运行求助

嘿，我来帮你搞定这个问题！你的多标签版本代码主要是语法逻辑出了问题——错误嵌套了Array.from，而且没有正确定位到每个.test元素下的input标签，而是直接获取了全局的input。下面给你两种可行的解决方案：

方案一：用querySelectorAll简化操作（推荐） #

querySelectorAll可以一步定位到所有.test容器下的input元素，代码简洁又直观：

function showName() {
  // 选中所有class为test的元素内部的input标签
  const allInputs = document.querySelectorAll(".test input");
  // 遍历每个input，弹出它的name属性
  allInputs.forEach(input => {
    alert(input.name);
  });
}

方案二：修复你原有的遍历逻辑 #

如果你想沿用getElementsByClassName的思路，需要先遍历每个.test元素，再在每个元素内部找input：

function showName() {
  // 获取所有class为test的元素，转成数组方便遍历
  const testContainers = Array.from(document.getElementsByClassName("test"));
  const inputNames = [];
  
  testContainers.forEach(container => {
    // 获取当前容器下的所有input，转成数组后收集name属性
    const inputsInContainer = Array.from(container.getElementsByTagName("input"));
    inputsInContainer.forEach(input => {
      inputNames.push(input.name);
    });
  });
  
  // 弹出每个收集到的name
  inputNames.forEach(name => {
    alert(name);
  });
}

小知识点补充 #

• getElementsByClassName和getElementsByTagName返回的是HTMLCollection（类数组对象），不是真正的数组，所以需要用Array.from()转换后才能使用forEach
• querySelectorAll返回的是NodeList，本身就支持forEach方法，不用额外转换，用起来更省心

内容的提问来源于stack exchange，提问作者Bartłomiej Kuźniar