Javascript不会在页面加载时更改图像源

我对javascript非常陌生。我正在尝试更改页面加载时的图像源。我不知道为什么这样不行。有人能给我提供一些见解吗？以下是我的html代码：

函数changeImage（）{
var charDiv=document.getElementById（“character1”）；
var imgTag=charDiv.getElementsByTagName（'img'）；
imgTag.src=“character2.jpg”；
}

getElementsByTagName（“img”）

将为您提供一个

函数changeImage（）{
var charDiv=document.getElementById（“character1”）；
var imgTag=charDiv.getElementsByTagName（'img'）[0]；
imgTag.src=“character2.jpg”；
}
为什么不使用与
charDiv
相同的方法获取img？
只需给您的
img
一个ID，然后只需通过ID访问即可。否则您将返回所有
img
-元素的数组。
您还可以使用：

 function changeImage(){
      var imgTag = document.querySelector("#character1 img");

      imgTag.src = "new desired image path";
    }

changeImage();

这似乎是最简单的方法，如果由于某种原因，您无法为图像提供id

演示：
getElementsByTagName
将为您提供一个
image
标记数组，因此
imgTag.src
在这种情况下不起作用。但是，charDiv.getElementsByTagName（“img”）只返回元素内id为=“character1”的图像数组。这很有效！非常感谢：）。因此，charDiv.getElementsByTagName（'img'）将返回id为“character1”的元素内的图像元素数组，对吗？由于只有一个图像，0索引1给出了相关的图像标记。如果我错了，请纠正我。问题是，li标签下的元素不仅仅是图像标签，还需要动态更改。必须为特定字符更改所有元素。因此，我不想在图像标记中添加特定的id。