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

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

Все ссылки на HTML-странице

document.getElementsByTagName("a")

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

Все ссылки на HTML-странице из консоли браузера, работающего на Chrome

$x("//a")

$x(path) возвращает массив элементов DOM, соответствующих заданному выражению XPath.

Все ссылки на HTML-странице с выводом результатов на текущую страницу (в эту же вкладку браузера)

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

Для удобства. Выведет в столбик все адреса из ссылок в текущий документ. Разметка страницы перезапишется, результат легко закинуть в EXCEL или WORD или туда, куда тебе это нужно.

 

Куда вводить эти команды?

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

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

 

Может ты хочешь знать как получить ВСЕ ССЫЛКИ САЙТА?

Специально для тебя написана статья «JavaScript | Список ссылок сайта«. Она о том, каким образом ты можешь собрать все ссылки любого сайта при помощи JavaScript, который работает на ЧПУ-адресах.

 

Видео инструкция по получению всех ссылок на HTML-странице

Этот метод также работает и с XML-документами.

 

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

 

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, а также поработать с готовыми API. Статья будет очень полезна тем людям, которые никогда не слышали слово JavaScript и которые ищут способы «Как собрать все ссылки со страницы?» или «Как извлечь все ссылки из HTML?». Эти люди знают свои потребности, но не знают о способах их реализации.

 

Ссылки

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

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

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

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

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

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

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

DOM

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

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

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

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

JavaScript | Массивы (Array)

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