Способ номер 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 предусматривает быстрое получение всех элементов изображений <img>. Для этого используется JavaScript команда:
document.images
Все эти элементы лежат в массиво-подобном прототипе объекта HTMLCollection. Это значит, что мы можем обращаться к любому элементу коллекции по его индексу (как у массивов). Например:
document.images[0]
Мы обратились к первому элементу нашего прототипа объекта HTMLCollection.
В ответ мы получили элемент со всеми атрибутами. Мы видим, что ссылка на изображение хранится в атрибуте «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)
Список адресов на изображения со страницы успешно создан. Его можно скопировать и использовать в собственных задачах.
Способ номер 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/
