在JavaScript中，批量获取具有特定ID的元素是一个常见的操作，特别是在DOM操作中。以下是几种常用的方法来获取包含特定ID的元素数据。
使用 `document.getElementById()`
虽然 `document.getElementById()` 方法一次只能获取一个ID对应的元素，但你可以通过循环来批量获取。
function getElementsById(ids) {
return ids.map(id => document.getElementById(id));
}
// 使用示例
const ids = ['id1', 'id2', 'id3'];
const elements = getElementsById(ids);
注意：这种方法会返回一个包含元素或`null`的数组。如果ID不存在于DOM中，对应的位置将是`null`。
使用 `document.querySelectorAll()`
`document.querySelectorAll()` 是一个更现代和灵活的方法，它可以接受一个CSS选择器字符串，并返回一个包含所有匹配元素的静态NodeList。
function getElementsById(ids) {
const selector = ids.join(','); // 将ID数组转换为逗号分隔的字符串
return Array.from(document.querySelectorAll(selector));
}
// 使用示例
const ids = ['id1', 'id2', 'id3'];
const elements = getElementsById(ids);
这种方法比使用 `document.getElementById()` 更简洁，因为不需要显式地循环。
性能考虑
- `document.getElementById()` 在大多数浏览器中针对ID查询进行了优化，因此通常性能会稍好一些，特别是当ID是唯一的时候。
- `document.querySelectorAll()` 是非常灵活的，可以用于复杂的查询，但是如果用于大量元素的批量ID查询，性能可能会受到影响。
注意事项
1. ID的唯一性：根据HTML规范，页面上不应该存在重复的ID。如果存在重复的ID，上述方法获取的结果可能不可预测。
2. 回流和重绘：如果DOM结构很大，连续使用`getElementById()`可能会导致多次回流和重绘，影响页面性能。使用`querySelectorAll()`则通常可以避免这个问题，因为它返回的是一个静态的NodeList，不会在每次查询时都重新计算。
3. 动态内容：如果页面内容是动态生成的，确保在尝试获取元素之前，这些元素已经被添加到了DOM中。
通过以上方法，你可以根据具体的使用场景和性能要求，选择合适的方式来批量获取具有特定ID的元素数据。