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

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

document.write(((Array.from(document.getElementsByTagName("a"))).map(i => {return i.href})).join("<br>"))
Получение всех ссылок на HTML-странице при помощи JavaScript и консоли браузера
Получение всех ссылок на HTML-странице при помощи JavaScript и консоли браузера

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

Для тех кто не понял длинную строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция ниже.

1. Открываем страницу сайта в браузере

Для примера возьмём страницу любого интернет-магазина с товарами. Пусть это будут фены. На странице со списком фенов будет большое количество ссылок, как на сами товары, так и на пункты навигации по сайту.

Страница интернет-магазина с фенами
Страница интернет-магазина с фенами

 

2. Открываем инструменты разработчика

Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Мы не будем использовать редакторы кода т. к. задача очень примитивная. С редактором кода нужно постоянно прыгать из окна в окно — это неудобно.

Инструменты разработчика в браузере (CTRL + SHIFT + i)
Инструменты разработчика в браузере (CTRL + SHIFT + i)

 

3. Находим в инструментах вкладку Console

Любые ошибки ввода команд легко исправлять простым нажатием клавиши «вверх» (стрелочка вверх) и исправлением команды. Опечатки возможны и неизбежны.

В консоли мы сразу будем видеть результат своей работы.

4. Получаем HTML-коллекцию элементов A

Вводим команду для получения всех HTML-элементов <a> с текущий страницы (с текущего документа) в браузере:

var a = document.getElementsByTagName("a")

В результате мы получим объект HTMLCollection который будет состоять из узлов (HTML-элементов <a>). Это массиво-подобный объект, но он не умеет работать с методами массивов.

Выводим переменную a в консоль:

HTML-коллекция элементов A
HTML-коллекция элементов A

 

5. Преобразовываем HTML-коллекцию в Массив

Используем метод from() конструктора Array, чтобы получить массив:

var b = Array.from(a)

Выводим переменную a в консоль:

Массив HTML-элементов (объектов)
Массив HTML-элементов (объектов)

Эта операция необходима для того, чтобы иметь возможность трансформировать элементы массива при помощи метода прототипов объекта Arraymap()

С коллекций HTML мы не сможем так работать.

 

6. Достаём из элементов массива значения ключа href

Из «грязного» массива получаем «чистый». Очищаем элементы массива от лишнего при помощи метода прототипов объекта Array — map(). Нас интересуют только ссылки. Задача такая. Ключ «href» вернёт нам полный URI — это значит что все относительные ссылки будут преобразованы в абсолютные.

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

Если бы нас интересовали относительные ссылки, то мы бы собирали новый массив из ключей «pathname«.

Выводим переменную a в консоль:

Массив со строковыми элементами в виде готовых ссылок
Массив со строковыми элементами в виде готовых ссылок

 

7. Массив перегоняем в строку и добавляем разделитель между элементами

Нам нужно просто слепить все элементы массива в одну длинную строку, которая будет на странице переноситься в столбец при помощи HTML-элемента <br>.

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

Выводим переменную a в консоль:

Строка с элементом переноса
Строка с элементом переноса

 

8. Выводим строку на страницу текущего документа

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

document.write(d)

Результат вывода:

Выведенный список ссылок на страницу
Выведенный список ссылок на страницу

 

Что дальше?

Теперь можно пользоваться результатом вывода и скопировать список себе в эксель, например. Потом можно почистить дубли до получения уникальных ссылок. Можно попробовать отделить ссылки по типу «внешние/внутренние». Можно поискать применение «фрагмента» URI (это решётка #) на предмет качественной разметки страницы.

Можно понять правильно ли оформлены ссылки на изображения. Можно поискать ссылки с «запросами» URI (это знак вопроса ?), которые могут транслироваться в рекламные сети. Можно поискать «корявые» ЧПУ для SEO.

Можно поискать «непопрятанные» ссылки на технические разделы сайта, которыми пользуются разработчики. Из них можно «подолбить» админ-панели на попытку входа в систему. Ну и т.д.. Информация о ссылочной массе страницы может оказаться полезной, а главное быстрой.

 

Ссылки

DOM стандарт — https://efim360.ru/dom/

Читайте перевод полной версии стандарта «объектной модели документа», чтобы ознакомиться со всеми концепциями и интерфейсами.

DOMLiving Standardhttps://dom.spec.whatwg.org

Читайте официальную документацию живого стандарта «объектной модели документа», чтобы быть в курсе последних изменений.

https://dom.spec.whatwg.org/#dom-document-getelementsbytagname

JavaScriptМассивыhttps://efim360.ru/javascript-massivy-array/

ECMAScriptLiving Standardhttps://tc39.es/ecma262/#sec-array.prototype.map

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