Как получить src значения множества изображений внутри div с чистым JavaScript? - PullRequest
Новая
       101

Как получить src значения множества изображений внутри div с чистым JavaScript?

0 голосов
/ 30 мая 2018

У меня есть список элементов, который содержит изображение и еще несколько элементов.Мне нужно получить источник изображения.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

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

У вас есть ошибка, но почему бы не использовать 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, с которыми может быть трудно иметь дело).

0 голосов
/ 30 мая 2018 

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>
0 голосов
/ 30 мая 2018

Изменить 

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