如何使用纯 JavaScript 获取 div 内部图像集的 src 值?

Question

>我有一个元素列表，其中包含一个图像和更多元素。我需要获取图像的 src。HTML代码是这样的。

<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>

我试图用这段代码获取图像的 src。

var elem = document.getElementsByClassName("flex-figure");
for (var i = 0; i <= elem.length; i++) {
var imgTag = elem[i].getElementsByTagName('img')[0];
var srcLink = imgTag.src;
console.log(srcLink);
}

它给出以下错误。

Uncaught TypeError: Cannot read property 'src' of undefined

Answer 1

你有一个逐个错误，但为什么不使用querySelectorAll代替，它会更干净：

const imgs = document.querySelectorAll('.flex-figure img');
imgs.forEach(img => console.log(img.src));

<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>

querySelectorAll比getElementsBy*方法灵活得多，并且还返回可以直接迭代的静态 NodeList，这与其他方法不同(返回实时 HTMLCollections，这可能很难处理(。

Answer 2

更改

for (var i = 0; i <= elem.length; i++) {

自

for (var i = 0; i < elem.length; i++) {

var elem = document.getElementsByClassName("flex-figure");
for (var i = 0; i < elem.length; i++) {
var imgTag = elem[i].getElementsByTagName('img')[0];
var srcLink = imgTag.src;
console.log(srcLink);
}

<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>

Answer 3

console.log(document.getElementsByTagName("IMG")[0].src)

<div class="flex-card">
<div class="flex-figure">
<a href="">
<figure class="image">
<span class="fig-lable">Colombo</span>
<img src="https://wenuka.com/media/visit-fl/banner-img.jpg" class="tile-media"/>
</figure>
</a>
</div>
</div>