1. 背景与核心概念
什么是通过类名选取 DOM 元素
通过类名选取 DOM 元素是前端开发中最常见的查询方式之一，它允许我们在文档中快速找到拥有相同 CSS 类名的一个或多个节点。理解这一点对实现交互、样式控制以及数据绑定都至关重要。
关键点在于类名仅作为筛选条件，而非对元素的属性直接操作。在 JavaScript 中，我们通常通过选择器来获得匹配的元素集合，然后对这些元素进行进一步的处理。
ID 作为属性在 DOM 中的定位作用
ID 是 HTML 元素的属性，用于唯一标识一个节点，网页中的任何一个具有唯一 ID 的元素都可以被快速定位到。这种定位在事件委托、动态创建与销毁元素时尤为有用。
需要区分“属性”和“方法”的使用场景。ID 可以通过属性读取（element.id 或 getAttribute('id')）得到，不能像方法一样被调用。正确理解这点有助于避免调用错误和潜在的性能损耗。
2. 通过类名定位元素的常见方法
使用 getElementsByClassName 与 for 循环
getElementsByClassName 会返回一个实时的 HTMLCollection，其中包含所有匹配指定类名的元素。要遍历它，需要循环并逐一处理。
通过集合逐个读取每个元素的 ID 时，推荐使用 for 循环或 for...of，以确保对每个匹配项进行独立操作。
使用 querySelectorAll 的便利性
querySelectorAll 提供了基于 CSS 选择器的更灵活的查询能力，它返回一个静态的 NodeList，适合现代开发中的链式处理。
结合属性选择器，还可以同时筛选类名和其他属性，这在复杂场景中非常有用。
3. ID 的属性语义：属性 vs 方法
为什么把 ID 视为属性来读取
在 DOM 中，ID 作为属性存在于每个元素上，它的值决定了元素在文档中的唯一性。读取时通常使用 element.id，而不是调用某个函数来获取。
属性读取的结果总是字符串类型，这使得将 ID 与其他属性一起处理时更加直观和稳定。
如何正确获取 ID 值
两种常用方式是 element.id 和 element.getAttribute('id')，二者通常返回相同的字符串，但在属性与属性代理或自定义设置时，行为可能略有差异。
推荐实践：优先使用 element.id 进行读取，只有在需要获取自定义数据或处理特殊场景时才使用 getAttribute。
4. 实战：从类名到 ID 的完整流程
示例 1：通过类名获取元素并读取其 ID
场景：页面中有若干个具有相同类名的按钮，你需要提取它们的 ID 以调用对应的处理逻辑。
下面展示了一个简单的实现思路：通过 className 选择器获取元素集合，然后逐个读取 ID。
// 方法一：getElementsByClassName
const items = document.getElementsByClassName('action-btn');
for (let i = 0; i < items.length; i++) {const id = items[i].id; // 使用属性读取console.log(id);
}// 方法二：querySelectorAll
const nodes = document.querySelectorAll('.action-btn');
nodes.forEach(node => {const id = node.getAttribute('id'); // 使用属性读取（方法形式）console.log(id);
});
要点总结：使用类名筛选后，读取 ID 时优先采用属性访问，这样可以确保在动态修改类名或属性时仍保持对 ID 的准确读取。
示例 2：事件绑定与 ID 读取的结合
在大量可点击元素中，事件代理是一种高效方案，它依赖于类名来定位目标，并通过事件对象读取触发元素的 ID。
结合事件对象的 target，我们可以直接读取目标元素的 ID，从而执行对应的逻辑分支。
document.addEventListener('click', function(event) {const target = event.target;if (target.classList.contains('action-btn')) {const id = target.id; // 使用属性读取console.log('触发按钮的 ID:', id);// 根据 ID 做相应处理}
});
5. 常见坑与性能注意事项
属性访问 vs getAttribute
属性访问通常比 getAttribute 更快，因为它直接访问对象的属性而非走到属性读取的通道。
在某些边缘场景下，getAttribute('id') 可能比 obj.id 更可靠，尤其当元素的属性通过非标准方式进行显式修改时，需要确保读取的是实际属性值而非缓存状态。
多元素处理的性能考量
一次性获取大量元素后再进行批处理，通常比逐步在事件里查找要高效。建议先用 querySelectorAll 或 getElementsByClassName 获取集合，再进行一次性遍历。
若需要频繁访问同一组元素的 ID，可以在第一次遍历时将结果缓存，避免重复的 DOM 访问，提高性能。
