如何通过JavaScript获取img的src

在Web开发中，我们经常会遇到需要使用JavaScript来操作页面上的元素的情况。其中，获取图片元素（img）的src属性是一个常见的需求。通过JavaScript获取img的src可以用于图片预加载、图片切换、动态修改图片等场景。

本文将详细介绍如何通过JavaScript获取img的src属性，并提供一些示例代码来帮助读者理解。

1. 使用getElementById方法获取img元素

在HTML中，我们可以通过使用id属性给img元素添加一个唯一的标识符。然后，通过JavaScript的getElementById方法可以获取到该元素。接下来，我们可以使用getAttribute方法获取img元素的src属性。

以下是一段示例代码：

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="image.jpg">

<script>
var img = document.getElementById("myImage");
var src = img.getAttribute("src");
console.log(src);
</script>

</body>
</html>

代码运行结果是在浏览器的控制台中输出图片的src属性值，即image.jpg。

2. 使用querySelector方法获取img元素

除了使用getElementById方法，我们还可以使用querySelector方法来获取img元素。querySelector方法可以通过CSS选择器指定需要获取的元素。

以下是使用querySelector方法的示例代码：

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="image.jpg">

<script>
var img = document.querySelector("img");
var src = img.getAttribute("src");
console.log(src);
</script>

</body>
</html>

这段代码与前一段代码的功能相同，都会输出图片的src属性值。

3. 使用getElementsByClassName方法获取img元素

getElementsByClassName方法可以通过指定元素的类名来获取元素。如果页面上有多个img元素，而且它们都有相同的类名，那么可以使用该方法来获取这些元素。接下来，我们可以通过索引来获取具体的某个img元素，并使用getAttribute方法获取其src属性。

以下是使用getElementsByClassName方法的示例代码：

<!DOCTYPE html>
<html>
<body>

<img class="myImage" src="image1.jpg">
<img class="myImage" src="image2.jpg">

<script>
var imgList = document.getElementsByClassName("myImage");
var src = imgList[0].getAttribute("src");
console.log(src);
</script>

</body>
</html>