本文介绍如何不依赖 jQuery 等第三方库，仅用原生 JavaScript 通过属性选择器高效选取所有 ID 以指定字符串开头的 DOM 元素，如 img1、img2、img3 等。
本文介绍如何不依赖 jquery 等第三方库，仅用原生 javascript 通过属性选择器高效选取所有 id 以指定字符串开头的 dom 元素，如 `img1`、`img2`、`img3` 等。
在实际开发中，我们常遇到一类结构化命名的 DOM 元素，例如多个 <img> 标签的 ID 分别为 img1、img2、img3……此时若需统一操作（如批量修改样式、绑定事件或切换类名），逐个调用 document.getElementById() 显得冗余且不可扩展。
推荐使用 document.querySelectorAll() 配合 CSS 属性选择器——它支持强大的匹配语法，其中 [id^="img"] 表示“匹配所有 id 属性值以 "img" 开头的元素”。该选择器完全基于标准 DOM API，兼容所有现代浏览器（包括 IE9+），无需额外依赖。
✅ 正确用法示例：
// 选取所有 id 以 "img" 开头的元素（如 img1, img2, imgContainer）
const imgElements = document.querySelectorAll('[id^="img"]');
// 遍历并统一设置宽度为 100%
imgElements.forEach(el => {
el.style.width = "100%";
});
// 或为每个元素添加点击事件
imgElements.forEach((el, index) => {
el.addEventListener('click', () => {
console.log(`Clicked on element #${index + 1}:`, el.id);
});
});⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- ^= 是“起始匹配”，区分大小写，请确保大小写与实际 ID 一致（如 [id^="Img"] 不会匹配 img1）；
- 若需“包含某子串”而非“开头匹配”，可用 [id*="img"]（但性能略低，且可能误匹配，如 myimg123）；
- querySelectorAll() 返回的是 静态 NodeList，不是数组，如需使用 map、filter 等方法，建议先转为数组：Array.from(document.querySelectorAll('[id^="img"]'))；
- 避免滥用通配符（如 [id]），以免影响性能或选中非预期元素。
总结：document.querySelectorAll('[id^="xxx"]') 是原生、简洁、高性能的批量 ID 选取方案。结合语义化命名规范（如 userAvatar1、userAvatar2），可大幅提升 DOM 操作的可维护性与可扩展性。
