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

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

Способ номер 1 - Метод getElementsByTagName()

Получение HTMLCollection с объектами HTML-элементов <img>

document.getElementsByTagName("img")

Конвертируем коллекцию (HTMLCollection) в массив (Array)

[...document.getElementsByTagName("img")]

Проходим по каждому объекту в массиве и извлекаем значение свойства src. Получаем массив из строк

[...document.getElementsByTagName("img")].map(i => i.src)

Выводим результат на текущую открытую страницу браузера. Нужно для копирования в эксельку.

document.write([...document.getElementsByTagName("img")].map(i => i.src).join("<br>"))

 

Видеоролик о получении ссылок на изображения из HTML-документа в браузере

 

Способ номер 2 - Получатель доступа images

Получение HTMLCollection с объектами HTML-элементов img

document.images

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

document.write((Array.from(document.images).map(i =>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". То есть нам нужно пройти по всем элементам коллекции и извлечь значение этого атрибута - составить список ссылок. Как это сделать?

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

let a = document.images

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

let b = Array.from(a)

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

let c = b.map(i => i.src)

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

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

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

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

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

 

Способ номер 3 - Console Utilities API reference

Работает в браузерах на движке Chromium

$$("img")

 

Способ номер 4 - Console Utilities API reference

Работает в браузерах на движке Chromium

$x("//img")

 

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

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

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

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

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

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

Fetch | Как сохранить изображение на клиенте? | JavaScript

Узнайте как сохранить найденные изображения на ПК из клиента.

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

DOM - Living Standard - https://dom.spec.whatwg.org/#dom-element-getelementsbytagname

Console Utilities API reference - https://developer.chrome.com/docs/devtools/console/utilities/