JS如何获取所有img src标签

在JavaScript中，获取页面上所有<img>标签的src属性可以通过多种方式实现。以下是几种常见的方法：

方法一：使用 document.querySelectorAll

document.querySelectorAll 方法可以选择页面上匹配指定CSS选择器的所有元素。对于获取所有<img>标签的src属性，可以使用以下代码：

// 获取所有 <img> 标签
const images = document.querySelectorAll('img');

// 遍历所有 <img> 标签并获取它们的 src 属性
const srcList = [];
images.forEach(img => {
    srcList.push(img.src);
});

console.log(srcList);

方法二：使用 document.getElementsByTagName

document.getElementsByTagName 方法返回一个包含所有指定标签名的元素的NodeList。可以通过遍历这个NodeList来获取每个<img>标签的src属性：

// 获取所有 <img> 标签
const images = document.getElementsByTagName('img');

// 遍历所有 <img> 标签并获取它们的 src 属性
const srcList = [];
for (let i = 0; i < images.length; i++) {
    srcList.push(images[i].src);
}

console.log(srcList);

方法三：使用 Array.from 和 map

如果你更喜欢使用数组方法，可以将NodeList转换为数组，然后使用map方法来提取src属性：

// 获取所有 <img> 标签并转换为数组
const imagesArray = Array.from(document.getElementsByTagName('img'));

// 使用 map 方法获取所有 src 属性
const srcList = imagesArray.map(img => img.src);

console.log(srcList);

应用场景

这些方法适用于需要在客户端动态获取页面上所有图片资源的场景，例如：

• 图片懒加载：在页面滚动到图片位置时才加载图片。
• 图片预加载：在页面加载完成前预先加载所有图片以提高用户体验。
• 图片统计分析：收集页面上的图片信息用于分析或报告。

注意事项

• 在某些情况下，图片可能还没有完全加载，此时获取到的src可能是空的或者是一个占位符。
• 如果页面中有动态生成的图片或者通过JavaScript插入的图片，可能需要使用事件监听或其他机制来确保在图片元素存在时执行获取操作。

以上方法均适用于现代浏览器，包括Chrome、Firefox、Safari和Edge等。在使用这些方法时，请确保页面已经完全加载，否则可能会错过一些动态加载的图片元素。