Одной командой
document.getElementsByTagName("a")[0].href
Вместо нуля нужно подставить индекс элемента a.
Куда вводить эту команду? Открываете HTML-страницу, с которой хотите получить все ссылки. Включаете «Инструменты разработчика» в браузере (CTRL + SHIFT + i). Находите вкладку «Console«. Тыкаете курсор в белое поле справа от синей стрелочки. Вставляете команду. Жмёте ENTER.
Для тех кто не понял длинную строчку кода выше, предлагаю упрощённую для понимания версию. Пошаговая инструкция ниже.
Описание
Мы уже решали эту задачу в публикации «Как получить все ссылки на HTML-странице?«. Рассмотрим подробнее вопрос получения атрибута href у HTML-элемента <a>.
Как мы знаем из курса HTML, у любого HTML-элемента существуют атрибуты, которые можно назначать (или не назначать). Эти атрибуты могут быть глобальными и уникальными. Глобальные — применяются ко всем элементам HTML (например, id, title, class, style). Уникальные — работают только со своими HTML-элементами (например, alt, src, href).
Мы знаем, что в JavaScript всё является объектами. Из этого следует, что каждый HTML-элемент можно представить в виде объекта и разложить информацию о нём на пары «ключ/значение». Объектная модель документа (DOM) предоставляет нам нужный функционал для этого разбиения пар «ключ/значение». В итоге мы должны получить такой объект А, у которого есть ключ href и его значение.
Предлагаю потренировать на каком-нибудь интернет магазине, где много ссылок. Пусть это будет такой URL:
https://www.ozon.ru
Скриншот на момент написания этой публикации:
Для захвата всей страницы я использую браузерное расширение FireShot.
Не будем глубоко погружаться внутрь сайта. На главной странице много блоков, которые являются ссылками со своими атрибутами href.
Посмотрим на разметку:
Всё как мы и предполагали. Каждая «картинка» (условно) — это ссылка. То есть с главной страницы можно перейти глубже по сайту. Отлично.
Соберём все HTML-элементы <a>, которые встречаются на главной странице и посмотрим на них:
var a = document.getElementsByTagName("a")
Нам возвращается коллекция HTML-элементов <a>:
По сути HTML-коллекция — это массиво-подобный объект. Инструменты разработчика в браузере нам подсвечивают название самого элемента, а также его классы.
Мы можем обратиться к любому элементу коллекции по его индексу:
a[100]
или обобщённо:
document.getElementsByTagName("a")[100]
В обоих случаях мы получаем нужный нам элемент (объект JavaScript):
Теперь можно сразу получить искомый href из a. Для этого обратимся к объекту по нужному ключу:
document.getElementsByTagName("a")[100].href
Результат вывода:
Альтернативный способ через путь JS
Отловим один элемент <a> с изображением робота и подписью «Для мальчиков». Для этого скопируем в разметке путь JS:
Скопированная команда будет выглядеть так:
document.querySelector("#\\37 135 > a")
Результат выполнения:
Данная команда вернёт нам объект, а значит мы сразу можем обратиться к ключу href и получить заветное значение:
document.querySelector("#\\37 135 > a").href
Результат выполнения:
Мы получили значение href из a. В нашем случае это URL:
"https://www.ozon.ru/category/igrushki-dlya-malchikov-7135/"
Ссылки
JavaScript | Как получить все ссылки на HTML-странице?
JavaScript | Объявление массива через квадратные скобки []
ECMAScript — Living Standard — https://tc39.es/ecma262/#sec-array-objects
Свойства объекта прототипа Array
