正文

掌握JS获取img标签src属性的简单方法

/0 浏览量
1112

在HTML中，<img> 标签用于嵌入图片，而 src 属性则是用于指定图片的URL。JavaScript（JS）提供了一种简单的方法来获取这个属性值，无论是动态生成的图片还是页面加载时就存在的图片。以下是一些获取 img 标签 src 属性的基本方法。

方法一：通过直接访问属性

这是最直接的方法，适用于已经加载到DOM中的 img 标签。

// 假设我们有一个id为'imageId'的img标签
var imgElement = document.getElementById('imageId');
var srcValue = imgElement.src;
console.log(srcValue); // 输出图片的URL

这里，我们使用了 getElementById 方法来获取指定ID的 img 元素，然后直接访问其 src 属性。

方法二：通过类名或标签名

如果你使用类名或标签名来选择 img 元素，可以使用 getElementsByClassName 或 getElementsByTagName 方法。

// 获取所有类名为'imageClass'的img标签
var imgElements = document.getElementsByClassName('imageClass');
for (var i = 0; i < imgElements.length; i++) {
    var srcValue = imgElements[i].src;
    console.log(srcValue); // 输出每个图片的URL
}

// 或者，获取所有img标签
var imgElements = document.getElementsByTagName('img');
for (var i = 0; i < imgElements.length; i++) {
    var srcValue = imgElements[i].src;
    console.log(srcValue); // 输出每个图片的URL
}

方法三：使用querySelector和querySelectorAll

如果你需要更精确的选择器，可以使用 querySelector 或 querySelectorAll。

// 使用querySelector获取单个img标签
var imgElement = document.querySelector('.imageClass img');
var srcValue = imgElement.src;
console.log(srcValue); // 输出图片的URL

// 使用querySelectorAll获取所有img标签
var imgElements = document.querySelectorAll('.imageClass img');
for (var i = 0; i < imgElements.length; i++) {
    var srcValue = imgElements[i].src;
    console.log(srcValue); // 输出每个图片的URL
}

方法四：动态获取

如果你需要获取动态添加到DOM中的 img 标签的 src 属性，可以使用 MutationObserver 来监听DOM变化。

// 创建一个观察者实例并传入回调函数
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(function(node) {
                if (node.tagName === 'IMG') {
                    var srcValue = node.src;
                    console.log(srcValue); // 输出新图片的URL
                }
            });
        }
    });
});

// 配置观察选项:
var config = { childList: true, subtree: true };

// 选择需要观察变动的节点
var targetNode = document.getElementById('container');

// 调用观察者的observe方法
observer.observe(targetNode, config);

在这个例子中，我们监听了一个ID为 container 的元素下的所有子节点变化，一旦有新的 img 标签被添加，就会在控制台输出其 src 属性值。

以上就是获取 img 标签 src 属性的一些基本方法。你可以根据实际情况选择最合适的方法。

-- 展开阅读全文 --