Question

基本上我想将smiley.gif更改为landscape.jpg而不更改div和标签，但此代码无效。有什么建议？

<div id="foo">
<div id="bar"><img src="smiley.gif">
Hello world!
</div>
</div>
<script>
getElementById("bar").getElementsByTagName("img").src="landscape.jpg";

</script>

Answer 1

getElementById是一种只能调用文档的方法。 getElementsByTagName将返回一个节点列表，您需要该节点列表中的第一个元素：

document.getElementById("bar").getElementsByTagName("img")[0].src="landscape.jpg";
// Note the `[0]` here -----------------------------------^^^

JSFiddle

Answer 2

如果你将ID分配给img标签并像这样使用它会更好

<div id="foo">
    <div id="bar"><img src="smiley.gif" id="myImg"> Hello world! </div>
</div>
<script>
    document.getElementById("myImg").src="landscape.jpg";
</script>

<强> jsfiddle 1

或使用此

<div id="foo">
    <div id="bar"><img src="smiley.gif"> Hello world! </div>
</div>
<script>
   var obj = document.getElementById("foo");
   if(obj != null)
   {
      var images = obj.getElementsByTagName('img');
      images[0].src = 'landscape.jpg';
   }
</script>

Answer 3

如果您已确认布局已修复，则只需使用。

document.getElementById('bar').firstElementChild.src = 'landscape.jpg';

这基本上找到名为bar的唯一元素，选择第一个子元素（不是firstChild，可以是一个空文本节点）并将新值分配给src

MDN上的文档

getElementById

firstElementChild

如何使用带有getelementbyid / tag / name的id在div中定位图像？

3 个答案: