使用纯 JavaScript 获取 div 内一组图像的 src 值

在开发 Web 应用程序或网站时，常常需要获取 div 内一组图像的 src 值，以便在特定场合下进行相应的操作，例如预览、下载、转存等。本文将介绍如何使用纯 JavaScript 获取 div 内一组图像的 src 值。

步骤

1. 首先，我们需要确定包含图像的 div 元素的 id 或 class，假设它的 id 为 img-container。

2. 使用 JavaScript 中的 document.getElementById 或 document.getElementsByClassName 方法获取 div 元素。

let imgContainer = document.getElementById('img-container');
// 或
let imgContainer = document.getElementsByClassName('img-container')[0];

3. 接下来，我们需要获取 div 元素内所有图像元素。可以使用 div 元素的 querySelectorAll 方法获取所有 img 元素，并将它们存储在一个数组中。

let imgList = imgContainer.querySelectorAll('img');

4. 现在，我们可以遍历 imgList 数组，依次获取每个图像元素的 src 属性值，并将它们存储在一个新的数组中。

let srcList = [];
for (let i = 0; i < imgList.length; i++) {
  srcList.push(imgList[i].src);
}

5. 现在，我们就可以得到 div 元素内所有图像元素的 src 值了。可以将其输出到控制台或进行其他操作。

console.log(srcList); // 输出所有图像的 src 值

完整代码

let imgContainer = document.getElementById('img-container');
let imgList = imgContainer.querySelectorAll('img');
let srcList = [];
for (let i = 0; i < imgList.length; i++) {
  srcList.push(imgList[i].src);
}
console.log(srcList);

结论

使用纯 JavaScript 获取 div 内一组图像的 src 值是一项基本技能，适用于从一个网页中获取图像链接、展示图像等多种场合。掌握该方法可以使我们在 Web 开发中事半功倍。