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

更改

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

要

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

你有一个一个一个错误，但为什么不使用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 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何用纯JavaScript获取div中的图像集的src值？

3 个答案: