Javascript获取img src并在div中显示链接

Question

我只是 javascript 的初学者，我正在尝试让 javascript 从具有特定类的特定图像中获取图像 src，并将 src 放入 div。

<div class="result"></div>
<div class="ilist">
<a href="#"><img src="images/dog.jpg" class="thumbnail"></a>
<a href="#"><img src="images/bird.jpg" class="thumbnail"></a>
<img src="images/cat.jpg" class="selected__img">  // THIS IS THE DESIRED IMAGE
</div>

我想在结果 div 中显示的是 this = images/cat.jpg但它不显示任何东西或一些奇怪的东西......

立即使用 JavaScript

var simg = document.getElementsByClassName('selected__img').src;
document.getElementsByClassName("result").innerHTML = simg;

抱歉我是个新手，但我正在努力学习..

Answer 1

getElementsByClassName() 方法返回文档中具有指定类名的所有元素的集合，作为 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引号访问节点。索引从 0 开始。

试试这个:

   <script>
        var simg = document.getElementsByClassName('selected__img');
        var src=simg[0].src;
        var resutlObj=document.getElementsByClassName("result")[0]
        resutlObj.innerHTML = src;
    </script>

完整代码片段:

var simg = document.getElementsByClassName('selected__img');
var src = simg[0].src;
var resutlObj = document.getElementsByClassName("result")[0]
resutlObj.innerHTML = src;

<div class="result"></div>
<div class="ilist">
  <a href="#"><img src="https://loremflickr.com/100/100?random=1" class="thumbnail"></a>
  <a href="#"><img src="https://loremflickr.com/100/100?random=2" class="thumbnail"></a>
  <img src="https://loremflickr.com/200/200?random=3" class="selected__img"> // THIS IS THE DESIRED IMAGE
</div>