JS получить href

Пусть у нас есть следующая ссылка:

<a href="index.html" id="link">text</a>

Получим ссылку на эту ссылку с помощью метода querySelector:

let link = document.querySelector('#link');

Давайте теперь прочитаем значение атрибута href.

Способ 1. Метод getAttribute

Одним из способов получения значений атрибутов является использование метода getAttribute. Этот метод возвращает значение указанного атрибута элемента или null, если атрибут не найден.

Пример использования:

let href = link.getAttribute('href');
console.log(href);

Важно отметить, что метод getAttribute не работает с элементами, созданными с использованием встроенного JavaScript (например, document.createElement). Для таких элементов необходимо использовать метод setAttribute и getAttribute.

Способ 2. Через свойство

Можно также получить значение атрибута href через свойство DOM элемента. Пример использования:

console.log(link.href);

Разница

Разница между двумя способами проявляется в следующем: метод getAttribute получает именно то значение, которое написано в атрибуте href. А вот когда мы получаем href через свойство, то видим уже нормализованное значение, в котором JavaScript автоматически исправил URL до абсолютного вида.