JS获取img的src值详解

1. 前言

在前端开发中，经常会使用到<img>标签来展示图片。有时候我们需要获取图片的src属性值，进行一些操作或者展示图片链接。本文将详细介绍如何使用JavaScript获取图片的src值。

2. 如何获取img的src值

要获取图片的src值，可以使用JavaScript的getElementById或者getElementsByTagName方法来获取<img>标签对象，然后使用getAttribute方法获取src属性值。

2.1 使用getElementById方法获取src值

通过getElementById方法可以获取指定id的元素对象，接着可以通过getAttribute方法获取该对象的src值。下面是一个获取<img>标签src值的示例：

// HTML代码
<img id="myImage" src="image.jpg">

// JS代码
var img = document.getElementById("myImage");
var src = img.getAttribute("src");
console.log(src);

运行结果为：”image.jpg”

2.2 使用getElementsByTagName方法获取src值

通过getElementsByTagName方法可以获取指定标签名的元素对象集合，接着可以通过getAttribute方法获取其中某个对象的src值。下面是一个获取<img>标签src值的示例：

<!-- HTML代码 -->
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">

<!-- JS代码 -->
<script>
    var imgs = document.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++){
        var src = imgs[i].getAttribute("src");
        console.log(src);
    }
</script>

运行结果为：

“image1.jpg”
“image2.jpg”
“image3.jpg”

3. 图片加载完成后获取src值

有时候我们需要在图片加载完成后才能获取到它的src值，可以利用onload事件来判断图片是否加载完成。

<!-- HTML代码 -->
<img id="myImage" src="image.jpg">

<!-- JS代码 -->
<script>
    var img = document.getElementById("myImage");
    var src = "";

    img.onload = function(){
        src = img.getAttribute("src");
        console.log(src);
    }
</script>

上面的代码中，当图片加载完成后，src值会被赋值给src变量，并在控制台中打印出来。

4. 其他方式获取图片src值

除了使用getElementById和getElementsByTagName方法，我们还可以使用querySelector和querySelectorAll方法来获取图片的src值。

4.1 使用querySelector方法获取src值

querySelector方法接收一个CSS选择器作为参数，返回第一个匹配的元素对象。下面是一个使用querySelector方法获取<img>标签src值的示例：

// HTML代码
<img class="myImage" src="image.jpg">

// JS代码
var img = document.querySelector(".myImage");
var src = img.getAttribute("src");
console.log(src);

运行结果为：”image.jpg”

4.2 使用querySelectorAll方法获取src值

querySelectorAll方法接收一个CSS选择器作为参数，返回所有匹配的元素对象集合。下面是一个使用querySelectorAll方法获取<img>标签src值的示例：

<!-- HTML代码 -->
<img class="myImage" src="image1.jpg">
<img class="myImage" src="image2.jpg">
<img class="myImage" src="image3.jpg">

<!-- JS代码 -->
<script>
    var imgs = document.querySelectorAll(".myImage");
    for (var i = 0; i < imgs.length; i++){
        var src = imgs[i].getAttribute("src");
        console.log(src);
    }
</script>

运行结果为：

“image1.jpg”
“image2.jpg”
“image3.jpg”

5. 总结

本文详细介绍了使用JavaScript获取图片src值的几种常用方法，包括使用getElementById、getElementsByTagName、querySelector和querySelectorAll方法。无论是单个图片还是多个图片，都可以通过以上方法轻松获取到它们的src值。