本文介绍如何不依赖 jQuery，仅用原生 JavaScript 通过属性选择器高效选取所有 ID 以指定字符串开头的 DOM 元素，如 img1、img2 等，并给出可直接运行的实践示例与注意事项。
本文介绍如何不依赖 jquery，仅用原生 javascript 通过属性选择器高效选取所有 id 以指定字符串开头的 dom 元素，如 `img1`、`img2` 等，并给出可直接运行的实践示例与注意事项。
在实际开发中，常遇到一组具有规律性 ID 的元素（例如 img1、img2、img3），需要统一操作它们——比如批量修改样式、绑定事件或切换状态。此时，document.getElementById() 显然不适用，因为它只返回单个元素。而 document.querySelectorAll() 结合 CSS 属性选择器，正是解决该问题的标准方案。
✅ 推荐方案：使用属性选择器 [id^="prefix"]
[id^="img"] 表示“匹配所有 id 属性值以 img 开头的元素”。这是 CSS 2.1 标准支持的属性选择器，现代浏览器（Chrome/Firefox/Safari/Edge）均兼容，无需额外库。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
// 选取所有 id 以 "img" 开头的元素，例如 img1、img2、img-test 等
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 ${el.id}, index: ${index}`);
});
});
⚠️ 注意事项
- ^= 是「起始匹配」，严格区分大小写（[id^="Img"] 不会匹配 img1）；
- 若需「包含某子串」而非「开头匹配」，可用 [id*="img"]（如匹配 my-img-1、thumbnail_img）；
- querySelectorAll() 返回的是 静态 NodeList，非实时集合，适合一次性操作；
- 若元素是动态生成的，需在插入 DOM 后再执行查询，或使用 MutationObserver 监听。
? 替代方案对比（不推荐）
| 方法 | 缺点 |
|---|---|
| document.getElementById("img1"), document.getElementById("img2")... | 手动枚举，不可扩展，维护成本高 |
| document.getElementsByTagName("*") + id.includes("img") | 性能差（遍历全部元素），易误匹配（如 big-image） |
综上，document.querySelectorAll('[id^="img"]') 是语义清晰、性能优异、兼容性好且符合 Web 标准的最佳实践。只需一行代码，即可精准、批量、可靠地选取目标元素。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
