Работа с href через JavaScript: от простого к сложному
Работа с атрибутом href через JavaScript
Как получить и изменить href у ссылки, используя свойство DOM?
Самый простой и эффективный способ - обращение к свойству href элемента <a>. Это свойство всегда возвращает полный (абсолютный) URL, даже если в атрибуте указан относительный путь. Для изменения достаточно присвоить новое значение.
// Получение ссылки
const link = document.querySelector('a');
// Чтение href
console.log(link.href); // 'https://example.com/page'
// Изменение href
link.href = 'https://example.com/newpage';
Js add (добавление в javascript)
Проблема: Если в атрибуте href указан относительный путь (например, /about), свойство вернет абсолютный URL. Это может быть неожиданно, если нужно сохранить исходное значение атрибута.
Решение: Для получения исходного атрибута без преобразования используйте getAttribute('href').
Как получить значение атрибута href в том виде, в котором он задан в HTML?
Метод getAttribute возвращает строку атрибута без преобразования в абсолютный URL. Это удобно, когда нужно работать с относительными путями или якорями.
const link = document.querySelector('a[href="/page"]');
const rawHref = link.getAttribute('href'); // '/page'
console.log(rawHref); // '/page'
Js добавить (добавление в javascript)
Проблема: Если атрибут не задан, getAttribute вернет null. Это может привести к ошибке при попытке использовать значение.
Решение: Проверяйте наличие атрибута через hasAttribute('href') или используйте оператор условного доступа ?.href (но это свойство, не метод).
Как изменить атрибут href, сохраняя его относительную форму?
Метод setAttribute позволяет задать атрибут именно в той строке, которая будет записана в HTML. При этом браузер автоматически преобразует значение в абсолютный URL при следующем чтении свойства href.
const link = document.getElementById('myLink');
link.setAttribute('href', '/new-path');
console.log(link.getAttribute('href')); // '/new-path'
console.log(link.href); // 'http://example.com/new-path'
Js элементы (элементы dom в javascript)
Как разобрать href на составные части (протокол, хост, путь и т.д.)?
Конструктор new URL() принимает строку href и возвращает объект с удобными свойствами: protocol, host, pathname, search, hash и другие.
const url = new URL('https://example.com:8080/path?query=123#section');
console.log(url.protocol); // 'https:'
console.log(url.host); // 'example.com:8080'
console.log(url.pathname); // '/path'
console.log(url.search); // '?query=123'
console.log(url.hash); // '#section'
Js href (атрибут href в javascript)
Проблема: Если передать в new URL() относительную строку без базового URL, возникнет ошибка.
Решение: Вторым аргументом укажите базовый URL, относительно которого нужно разрешить относительный путь: new URL('/about', 'https://example.com').
Как изменить только часть href (например, заменить хэш или параметры)?
Используя объект URL, можно модифицировать его свойства, а затем присвоить полученный href обратно элементу.
const link = document.getElementById('myLink');
const url = new URL(link.href);
url.hash = 'newsection';
url.searchParams.set('page', '2');
link.href = url.href;
Js найти (поиск в javascript)
Как обработать событие клика по ссылке и изменить её href до перехода?
В обработчике события click можно изменить href, а также предотвратить переход (метод preventDefault) и выполнить свою логику.
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
this.href = 'https://newurl.com';
// Дополнительные действия
window.location.href = this.href;
});
Проблема: Если не вызвать preventDefault, браузер перейдет по оригинальному URL до того, как изменения вступят в силу.
Продвинутые примеры работы с href
Ниже приведены более сложные сценарии использования атрибута href в JavaScript.
1. Изменение href у всех ссылок на странице
const allLinks = document.querySelectorAll('a');
allLinks.forEach((link, index) => {
link.href = `https://example.com/page${index + 1}`;
});
// Результат: все ссылки на странице будут перенаправлять на example.com/page1, page2 и т.д.
2. Создание новой ссылки с динамическим href
const newLink = document.createElement('a');
newLink.href = 'https://newsite.com';
newLink.textContent = 'Перейти на новый сайт';
document.body.appendChild(newLink);
// В DOM добавится элемент Перейти на новый сайт
3. Получение всех href и фильтрация внешних ссылок
const links = document.querySelectorAll('a');
const externalLinks = [];
links.forEach(link => {
const url = new URL(link.href);
if (url.hostname !== window.location.hostname) {
externalLinks.push(url.href);
}
});
console.log(externalLinks);
// Выведет массив URL, ведущих на другие домены.
4. Извлечение параметров query из href ссылки
const link = document.querySelector('a[href*="?"]');
if (link) {
const url = new URL(link.href);
const params = Object.fromEntries(url.searchParams.entries());
console.log(params); // {id: '123', name: 'test'}
}
// Пример: для href="https://example.com?page=1&sort=asc" выведет {page: '1', sort: 'asc'}
5. Автоматическая подстановка якоря при клике
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function(e) {
if (!this.hash) {
this.hash = 'top';
}
// Браузер перейдет по href с добавленным #top
});
});
6. Сравнение атрибута href и свойства href при относительном пути
// HTML: About
const a = document.getElementById('test');
console.log('getAttribute:', a.getAttribute('href')); // '/about'
console.log('property:', a.href); // 'http://example.com/about'
// Разница очевидна: свойство возвращает абсолютный URL.
7. Изменение href с сохранением query-параметров
const link = document.getElementById('dynamicLink');
const url = new URL(link.href);
url.searchParams.set('utm_source', 'javascript');
link.href = url.toString();
8. Проверка, ведет ли ссылка на текущую страницу
const currentUrl = window.location.href;
const link = document.querySelector('a');
if (new URL(link.href).href === currentUrl) {
console.log('Это ссылка на текущую страницу');
}