本文介绍如何不依赖 jQuery，仅用原生 JavaScript 通过属性选择器批量获取 ID 以特定字符串开头的 DOM 元素，如 img1、img2 等，并给出实用示例与注意事项。
本文介绍如何不依赖 jquery，仅用原生 javascript 通过属性选择器批量获取 id 以特定字符串开头的 dom 元素，如 `img1`、`img2` 等，并给出实用示例与注意事项。
在实际开发中，我们常遇到一组具有命名规律的 DOM 元素（例如 id="img1"、id="img2"、id="img3"），需要统一操作它们——比如批量调整样式、绑定事件或切换状态。此时，document.getElementById() 显然不适用，因为它只返回单个元素；而 querySelectorAll() 结合 CSS 属性选择器，正是解决该问题的标准、高效方案。
✅ 推荐方案：使用属性选择器 [id^=prefix]
[id^=img] 是一个 CSS 属性选择器，含义是：“匹配所有 id 属性值以 img 开头的元素”。它属于标准 W3C 规范，所有现代浏览器（包括 Chrome、Firefox、Safari、Edge 及 IE9+）均原生支持。
// 获取所有 id 以 "img" 开头的元素（如 img1, img2, img-test）
const imgElements = document.querySelectorAll('[id^=img]');
console.log(imgElements); // NodeList(3) [div#img1, img#img2, section#img3]
// 遍历并统一设置宽度为 100%
imgElements.forEach(el => {
el.style.width = '100%';
});
// 或添加点击事件
imgElements.forEach(el => {
el.addEventListener('click', () => {
console.log('Clicked:', el.id);
});
});
⚠️ 注意事项
- 区分大小写：HTML id 属性默认不区分大小写，但 CSS 选择器 [id^=...] 在 HTML 文档中区分大小写（因 HTML 解析器将 id 视为 ASCII 字符串）。建议统一使用小写命名（如 img1 而非 Img1）以确保兼容性。
- 性能提示：querySelectorAll() 返回的是静态 NodeList，不是实时集合，适合一次性批量操作；若需动态响应 DOM 变化，请结合 MutationObserver。
- 更精确匹配？ 若需匹配“包含某词”而非“以某词开头”，可用 [id*=img]（含子串）；但注意这可能误匹配 myimg1 或 thumbnail-img。前缀匹配 [id^=img] 更安全、语义更明确。
- 避免 ID 冲突：确保 HTML 中 id 值全局唯一——即使批量选择，也不应人为创建重复 id（违反 HTML 标准，可能导致不可预期行为）。
? 实际整合示例（替换你原有代码）
假设你希望点击按钮时，不仅切换 #resim 的宽度，还同步调整所有 id 以 "img" 开头的图片尺寸：
const resim = document.getElementById("resim");
const originalWidth = resim.style.width || getComputedStyle(resim).width;
const imgElements = document.querySelectorAll('[id^=img]');
document.getElementById("resizeButton").addEventListener("click", function () {
changedivclass();
const targetWidth = resim.style.width === "100%" ? originalWidth : "100%";
resim.style.width = targetWidth;
// 同步作用于所有 img* 元素
imgElements.forEach(el => {
el.style.width = targetWidth;
});
});
掌握 querySelectorAll('[id^=...]') 这一技巧，能让你摆脱循环 getElementById 的冗余写法，写出更简洁、可维护、符合现代 Web 标准的原生 JavaScript 代码。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
