如何在JavaScript中遍历HTML元素inputs的所有子元素？

先看你原代码里的几个问题：

• 循环变量i没加let/const声明，会变成全局变量，容易引发冲突
• 选择器写错了：elements["i"]是取数组的字符串索引"i"，不是当前循环的索引值，而且id选择器必须加#前缀
• 赋值语法错误：let elements[i]这种写法不合法，不能用let声明数组元素
• 单个id元素用querySelector就够了，querySelectorAll是用来选多个元素的

下面给两种符合需求的实现方式：

方案一：直接遍历.inputs容器内的所有元素 #

如果要获取.inputs下的所有元素（包括嵌套的子元素），可以这样写：

const inputsContainer = document.querySelector('.inputs');
// 获取容器内所有元素
const allElements = inputsContainer.querySelectorAll('*');
// 遍历处理每个元素
allElements.forEach(element => {
  // 这里写你要执行的操作，比如打印元素
  console.log(element);
});

如果只需要容器的直接子元素（不包含.price里的嵌套input）：

const inputsContainer = document.querySelector('.inputs');
const directChildren = inputsContainer.children;
// 遍历直接子元素
for (const child of directChildren) {
  console.log(child);
  // 如果要处理.price里的嵌套元素，可额外遍历
  if (child.classList.contains('price')) {
    Array.from(child.children).forEach(input => {
      console.log(input);
    });
  }
}

方案二：根据id列表获取对应元素 #

如果你的需求是按给定的id数组获取元素，修正后的代码如下：

const elementIds = ["title","price","taxes","ads","discount","total","count","category","submit"];
// 用对象存储元素，避免修改原数组
const elements = {};

for (let i = 0; i < elementIds.length; i++) {
  const id = elementIds[i];
  elements[id] = document.querySelector(`#${id}`);
  // 可选：检查元素是否存在，避免后续操作报错
  if (!elements[id]) {
    console.warn(`未找到id为 ${id} 的元素`);
  }
}

// 之后可以通过elements.title、elements.price等访问对应元素
console.log(elements.title);

内容的提问来源于stack exchange，提问作者Mahmoud Salama