JavaScript动态选择DOM元素的正确方法

，其类名分别为 currentPriorityB1、currentPriorityB2、currentPriorityB3……，同时你手上有一个数字变量（例如 num = 2），如何才能快速、安全地选中对应的元素？

许多刚入门的开发者会下意识尝试：将字符串与变量拼接，以引用一个已存在的变量。比如写成 `currentPriorityB${num}`。答案是：这样会导致语法错误。 Ja vaScript 并不支持通过字符串来动态解析局部变量名，浏览器会直接抛出 “ReferenceError: currentPriorityB is not defined” 的错误，提示该变量不存在。

正确思路：构造选择器，而非引用变量

关键在于转变思维。我们不是在“引用一个叫做 currentPriorityB2 的变量”，而是在“查询一个类名为 .currentPriorityB2 的 DOM 元素”。这是完全不同的两件事。因此，正确且高效的做法是：直接使用模板字符串构造完整的 CSS 选择器，然后交给 `document.querySelector()` 执行查询。

const num = 2;
const current = document.querySelector(`.currentPriorityB${num}`);
if (current) {
  console.log('选中的元素：', current.textContent); // 输出 "2"
} else {
  console.warn(`未找到类名为 .currentPriorityB${num} 的元素`);
}

代码清晰且安全，绕开了变量解析的陷阱，直接进入 DOM 查询的正轨。

进阶技巧与最佳实践

掌握基本方法后，还可以做得更好。以下是来自实战的建议：

• 批量操作怎么办？ 如果需要操作所有同类元素（例如全部隐藏，再显示当前选中的），可以使用属性选择器批量获取：`document.querySelectorAll('[class^="currentPriorityB"]')`。这比循环拼接选择器更高效。
• 类名设计有讲究。 在类名中硬编码数字（如 B1、B2）是一种脆弱的做法。更推荐使用自定义数据属性（data-*）存储状态，例如给元素加上 `data-priority="1"`，然后用 `querySelector('[data-priority="2"]')` 查询。这样代码语义更清晰，维护性更强。
• 绝对要避免的“雷区”。 切忌为了省事使用 `eval()`，例如写成 `eval(`currentPriorityB${num}`)`。`eval` 会带来严重的安全风险（如 XSS 攻击）、性能损耗，且在严格模式下被禁用。为了一时便利冒如此风险，完全不值得。

总结

动态选择 DOM 元素的本质是查询，而非变量寻址。核心原则是：始终优先考虑通过选择器逻辑（类名、属性或数据集）来动态构建查询条件，而不是试图“反射”或拼接 JavaScript 变量名。

这不仅是解决特定问题的技巧，更是编写健壮、可维护的现代 Ja vaScript 代码的最佳实践。牢记这一思路，下次再遇到类似场景，你就能轻松避开陷阱，直击要害。