JavaScript | Как получить все ссылки на изображения на HTML-странице?

Одной командой

document.images

С выводом результатов на текущую страницу

document.write((Array.from(document.images).map(i => {return i.src})).join("<br>"))

Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все веб-ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте клавишу ENTER.

Пошаговая инструкция

Стандарт HTML предусматривает быстрое получение всех элементов изображений <img>. Для этого используется JavaScript команда:

document.images
Команда document.images - JavaScript
Команда document.images — JavaScript

Все эти элементы лежат в массиво-подобном прототипе объекта HTMLCollection. Это значит, что мы можем обращаться к любому элементу коллекции по его индексу (как у массивов). Например:

document.images[0]

Мы обратились к первому элементу нашего прототипа объекта HTMLCollection.

Первое изображение из коллекции - JavaScript
Первое изображение из коллекции — JavaScript

В ответ мы получили элемент со всеми атрибутами. Мы видим, что ссылка на изображение хранится в атрибуте «src». То есть нам нужно пройти по всем элементам коллекции и извлечь значение этого атрибута — составить список ссылок. Как это сделать?

Дадим коллекции имя, чтобы взаимодействовать с переменной:

var a = document.images

Потом нам нужно преобразовать HTML коллекцию в массив:

var b = Array.from(a)

Далее мы должны «пробежаться» по каждому элементу коллекции и достать значение в атрибуте «src». Делаем это при помощи метода map(). В ответ нам вернётся новый массив со строковым типом данных.

var c = b.map(i => {return i.src})

Теперь можно соединить все элементы массива в одну строку с разделителем <br>. Мы генерируем HTML-разметку с переносами строк:

var d = c.join("<br>")

И вывести на текущую страницу:

document.write(d)
Список ссылок на изображения на странице - JavaScript
Список ссылок на изображения на странице — JavaScript

Список адресов на изображения со страницы успешно создан. Его можно скопировать и использовать в собственных задачах.

 

Что нужно знать?

В этом списке будут ТОЛЬКО те изображения, которые находятся в самой разметке страницы — которые есть в элементах img. Это значит, что если система управления контентом сайта предусматривает загрузку изображений в стилях CSS, тогда таких фото не будет в этом списке.

Также может не быть фотографий, которые обрабатываются скриптами — например, фотографии из слайдеров, потому что это фоновая подгрузка элементов, которые изменяют структуру страницы в процессе взаимодействия, а не во время первичной загрузки документа. Это изменение DOM-дерева.

Ещё в список не попадут изображения, которые должны открываться по ссылке (например, в новой вкладке). Имеется ввиду HTML-элемент <a> и атрибут href. Получение изображения в этом случае описано в публикации «JavaScript | Как получить все ссылки на HTML-странице?»

Имейте это ввиду.

Информационные ссылки

JavaScript | Как получить все ссылки на HTML-странице?

HTML — Living Standard — https://html.spec.whatwg.org/#dom-document-images

DOM — Living Standard — https://dom.spec.whatwg.org/#interface-document

 

Поделись записью