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

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

document.getElementsByTagName("a")

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

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). Мы не будем использовать редакторы кода т. к. задача очень примитивная. С редактором кода нужно постоянно прыгать из окна в окно — это неудобно. Мы будем пользоваться консолью браузера для ввода команд JavaScript.

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

 

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

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

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

 

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>. Для этой цели мы используем метод прототипов объекта Array — join().

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

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

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

 

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

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

document.write(d)

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

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

 

Что дальше?

Теперь можно пользоваться результатом вывода и скопировать список себе в эксель, например. Потом можно почистить дубли до получения уникальных ссылок. Можно попробовать отделить ссылки по типу «внешние/внутренние«.

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

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

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

 

Ссылки

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

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

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

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

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

JavaScript | Как очистить ссылки от запросов и фрагментов?

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

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