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

本文介绍如何不依赖 jQuery，仅用原生 JavaScript 通过属性选择器（如 [id^="img"]）高效选取所有 ID 以指定字符串开头的 DOM 元素，并结合实际场景完成批量操作。

本文介绍如何不依赖 jquery，仅用原生 javascript 通过属性选择器（如 `[id^="img"]`）高效选取所有 id 以指定字符串开头的 dom 元素，并结合实际场景完成批量操作。

在前端开发中，常遇到一组具有规律性 ID 的元素（例如 img1、img2、img3），需统一操作却无法逐个调用 getElementById。此时，document.querySelectorAll() 配合 CSS 属性选择器是最简洁、标准的解决方案。

✅ 推荐方法：使用属性选择器 [id^="prefix"]

[id^="img"] 表示“匹配所有 id 属性值以 "img" 开头的元素”。这是 CSS2.1 标准支持的属性选择器，现代浏览器（包括 IE7+）均兼容。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

// 选中所有 id 以 "img" 开头的元素（如 img1, img2, imgContainer）
const imgElements = document.querySelectorAll('[id^="img"]');

// 遍历并统一设置样式
imgElements.forEach(el => {
  el.style.width = el.style.width === '100%' ? 'auto' : '100%';
});

? 应用到你的原始代码中（升级为批量控制）

你原逻辑只控制单个 #resim 元素，现在可轻松扩展为批量响应：

// 保存所有匹配元素的原始宽度（避免重复计算）
const imgElements = document.querySelectorAll('[id^="img"]');
const originalWidths = new Map();

imgElements.forEach(el => {
  originalWidths.set(el, el.style.width || getComputedStyle(el).width);
});

document.getElementById("resizeButton").addEventListener("click", function () {
  changedivclass(); // 假设此函数已定义
  imgElements.forEach(el => {
    if (el.style.width === "100%") {
      el.style.width = originalWidths.get(el);
    } else {
      el.style.width = "100%";
    }
  });
});

⚠️ 注意事项

❌ getElementById 只能返回单个元素，不支持通配或模糊匹配；
✅ querySelectorAll 返回 NodeList（类数组），支持 forEach、for...of 等遍历；
? 其他常用 ID 匹配模式：
- [id$="suffix"] —— 以某字符串结尾（如 id="photo1_thumb"）；
- [id*="part"] —— 包含某子串（如 id="my-img-2" 匹配 [id*="img"]）；
- [id="img1"], [id="img2"] —— 显式列举（不推荐用于大量 ID）。