本文介绍如何使用原生 JavaScript 高效提取指定容器内所有 元素的 src 属性值，并存入纯字符串数组，适用于图片路径收集、懒加载预处理或资源校验等场景。
本文介绍如何使用原生 javascript 高效提取指定容器内所有 `` 元素的 `src` 属性值，并存入纯字符串数组，适用于图片路径收集、懒加载预处理或资源校验等场景。
在实际开发中，我们常需从 DOM 中批量读取 <img alt="如何将 HTML 中 img 标签的 src 属性批量提取为字符串数组" > 标签的 src 属性（如生成图片列表、做路径校验或初始化图库组件）。给定如下 HTML 结构：
<div class="cc"> <img class="content-image" src="./img1.png" alt=""> <img class="content-image" src="./img2.png" alt=""> <img class="content-image" src="./img3.png" alt=""> <img class="content-image" src="./img4.png" alt=""> <img class="content-image" src="./img5.png" alt=""> </div>
目标是获取一个形如 ['./img1.png', './img2.png', './img3.png', './img4.png', './img5.png'] 的字符串数组。
✅ 正确做法是：使用 querySelectorAll 定位所有带 src 属性的 <img alt="如何将 HTML 中 img 标签的 src 属性批量提取为字符串数组" > 元素，再通过 getAttribute('src') 提取原始属性值。以下是简洁可靠的实现：
const container = document.querySelector('.cc');
const images = Array.from(
container.querySelectorAll('img[src]')
).map(img => img.getAttribute('src'));
console.log(images);
// → ["./img1.png", "./img2.png", "./img3.png", "./img4.png", "./img5.png"]? 推荐使用
Array.from()或扩展运算符[...nodeList]将NodeList转为数组，再配合map()函数式处理——语义清晰、无副作用、可链式调用。立即学习“前端免费学习笔记（深入）”；
⚠️ 常见误区提醒：
- ❌ 不要
new Image('img[src]')：这会创建新的HTMLImageElement实例，而非读取现有元素属性； - ❌ 避免直接访问
img.src（即img.src返回的是绝对 URL，受页面 base URL 影响）；而img.getAttribute('src')返回的是原始相对路径字符串，更符合多数业务预期； - ✅ 若需确保路径统一为绝对地址，可后续用
new URL(img.getAttribute('src'), location.href).href转换。
此外，为增强健壮性，可添加空值过滤：
const images = Array.from(
document.querySelectorAll('.cc img[src]')
).map(el => el.getAttribute('src'))
.filter(src => typeof src === 'string' && src.trim() !== '');总结：提取 src 属性本质是 DOM 属性读取操作，核心在于正确选择元素 + 使用 getAttribute() 获取原始属性值。避免混淆 src 属性（attribute）与 src 属性映射后的 DOM 属性（property），即可稳定产出所需字符串数组。
