如何正确遍历option类HTML元素？使用document.querySelector遍历的最佳方法

你可以按照以下方式实现，完全匹配你给出的伪代码逻辑：

实现代码 #

// 提前定义所有要查询的类对应的选择器，注意类选择器需要加`.`前缀
const optionSelectors = ['.option1', '.option2', '.option3'];

// 遍历查询每个选择器对应的元素
for (const selector of optionSelectors) {
  const targetEl = document.querySelector(selector);
  // 未查询到对应元素时直接跳出循环
  if (!targetEl) break;

  // 这里可以补充你需要对元素执行的操作逻辑
  console.log(`成功匹配到${selector}对应的元素`, targetEl);
}

console.log("just executed all the html class options");

逻辑说明 #

• 如果你需要所有类都查询一遍，不管是否存在，只需要删除if (!targetEl) break;这一行即可，会完整遍历三个类的选择器
• 该实现严格限制只使用document.querySelector()完成查询，没有用到其他DOM查询API
• 如果要兼容更早的不支持for of语法的环境，可以替换为普通while循环实现：

const optionSelectors = ['.option1', '.option2', '.option3'];
let i = 0;
while (i < optionSelectors.length) {
  const targetEl = document.querySelector(optionSelectors[i]);
  if (!targetEl) break;
  // 操作逻辑
  i++;
}
console.log("just executed all the html class options");

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