如何使用原生 JavaScript 批量选取 ID 包含相同前缀的元素-html教程-PHP中文网

本文介绍如何不依赖 jQuery 等第三方库，仅用原生 JavaScript 通过属性选择器高效选取所有 ID 以指定字符串开头的 DOM 元素，如 img1、img2、img3 等。

本文介绍如何不依赖 jquery 等第三方库，仅用原生 javascript 通过属性选择器高效选取所有 id 以指定字符串开头的 dom 元素，如 `img1`、`img2`、`img3` 等。

在实际开发中，我们常遇到一类结构化命名的 DOM 元素，例如多个标签的 ID 分别为 img1、img2、img3……此时若需统一操作（如批量修改样式、绑定事件或切换类名），逐个调用 document.getElementById() 显得冗余且不可扩展。

推荐使用 document.querySelectorAll() 配合 CSS 属性选择器——它支持强大的匹配语法，其中 [id^="img"] 表示“匹配所有 id 属性值以 "img" 开头的元素”。该选择器完全基于标准 DOM API，兼容所有现代浏览器（包括 IE9+），无需额外依赖。

✅ 正确用法示例：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

// 选取所有 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);
  });
});

⚠️ 注意事项：

^= 是“起始匹配”，区分大小写，请确保大小写与实际 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 操作的可维护性与可扩展性。