исходный код javascript img

Question

Я хотел бы сделать расширение Chrome для загрузки изображений с сайтов. Я ищу способ сделать это. В частности, веб-сайт, который использует javascript для перехода к следующему изображению, поэтому мне нужен способ найти URL-адрес изображения, а затем перейти к следующему изображению и найти его URL-адрес ... до страницы ошибки 404. Но первый шаг - сделать это на первой странице, поэтому я здесь.

Исходный код сайта выглядит так:

<span class="next" id="lel"><img src="http://lel.site.com:8080/name/9264/32309/3_713641d7cf1a3807bc2a7e38dbbe8189.png?zoneID=95051&amp;pageID=1616841&amp;siteID=3174&amp;st=ySF1vI_OmDkLcs7TUHaxAQ&amp;e=1525741200" border="0" id="image_lel" class="pointer" style="opacity: 1; margin-left: 0px; height: 1150px; width: 800px; position: relative; left: 0px; visibility: visible;"></span>

Я попробовал какой-нибудь javascript, выполненный во всплывающем расширении, например:

<script>
var sourdeCode = document.documentElement.innerHTML;
var someimage = document.getElementById('the_id_of_the_image');
var myimg = someimage.getElementsByTagName('img')[0];
var the_url = myimg.src;
</script>

Но, как и ожидалось, это не работает. Может ли кто-нибудь помочь мне? Спасибо

Answer 1

Используйте document.getElementsByTagName (), чтобы получить все изображения в DOM:

var images = document.getElementsByTagName('img'); 
var srcList = [];
for(var i = 0; i < images.length; i++) {
    srcList.push(images[i].src);
}

Вы также можете использовать коллекцию document.images.

И, если вы можете использовать jQuery, вы также можете использовать $ ('img'), который дает вам объект jQuery, содержащий все элементы img.

var srcList = $('img').map(function() {
    return this.src;
}).get();

Примечание. Приведенный выше код поможет вам прочитать все изображения, доступные в текущем DOM. Возможно, вам придется использовать некоторую логику для захвата изображений, если они загружаются динамически (для некоторых событий).