JS властивість Document.links
Загальний опис
Властивість Document.links є корисним інструментом у веб-розробці, який надає доступ до колекції всіх посилань (<a> елементів) на поточній веб-сторінці. Її основна суть полягає в тому, щоб дозволити розробникам легко отримувати доступ до посилань на сторінці і взаємодіяти з ними програмно. Ця властивість надає можливості для виконання різноманітних завдань, таких як зміна атрибутів посилань, отримання URL-адрес посилань, підрахунок кількості посилань тощо.
Document.links є зручним способом отримання всіх посилань на сторінці. Вона представляє собою колекцію HTML-елементів <a>, що дозволяє розробникам легко отримувати доступ до них за допомогою індексів або ітерації через цю колекцію. Ця властивість особливо корисна при необхідності виконати масові дії з посиланнями або отримати їх атрибути для подальшого аналізу або обробки.
Отримання кількості посилань на сторінці
Найпростіший спосіб використання Document.links - отримання кількості посилань на сторінці. Це можна зробити за допомогою властивості length:
let linksCount = document.links.length;
console.log("Кількість посилань на сторінці: " + linksCount);
Цей код виведе в консоль кількість посилань, які є на поточній сторінці.
Зміна атрибутів посилань
Можна також легко змінити атрибути посилань, перебираючи колекцію Document.links. Наприклад, якщо потрібно додати атрибут target="_blank" до всіх посилань на сторінці, можна використати такий код:
Array.from(document.links).forEach(link => {
link.target = "_blank";
});
Цей код змінює атрибут target всіх посилань на сторінці на _blank, відкриваючи їх у новому вікні (або в новій вкладці, залежно від налаштувань браузера).
Отримання URL-адрес посилань
Також можна отримати URL-адреси всіх посилань на сторінці для подальшого використання або аналізу. Наприклад, щоб вивести усі URL-адреси посилань на консоль, можна використати наступний код:
Array.from(document.links).forEach(link => {
console.log(link.href);
});
Цей код виведе усі URL-адреси посилань на поточній сторінці.
Document.links є потужним інструментом, що дозволяє отримати доступ до всіх посилань на сторінці і взаємодіяти з ними програмно. Її використання може спростити роботу з посиланнями, забезпечуючи можливості для виконання різноманітних завдань у веб-розробці, таких як масові зміни, отримання URL-адрес або підрахунок кількості посилань.
| Порада: | Для пошуку конкретного посилання за його атрибутами (наприклад, |
| Порада: | Пам'ятайте, що |
| Порада: | Перед тим як взаємодіяти з посиланнями на сторінці, переконайтеся, що вони доступні і мають відповідні атрибути. Використання |
Синтаксис
Document.linksЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми використовуємо властивість document.links для отримання колекції всіх посилань на сторінці. Далі ми створюємо функцію isExternalLink, яка перевіряє, чи посилання веде на інший домен. Функція updateLinksList створює елементи списку <li> для кожного посилання та додає їх до елемента <ul> з id="linksList".
Користувач може вибрати, чи показувати лише зовнішні посилання, встановивши чекбокс "Показати лише зовнішні посилання". Функція updateLinksList перевіряє стан цього чекбокса та фільтрує список посилань відповідно. Зовнішні посилання відкриваються в новій вкладці браузера за допомогою властивості target="_blank".
При завантаженні сторінки викликається функція updateLinksList для початкового відображення списку посилань. Також ця функція викликається при зміні стану чекбокса "Показати лише зовнішні посилання" за допомогою обробника події change.
Цей приклад демонструє використання властивості document.links для отримання колекції посилань, а також фільтрацію та відображення цих посилань на сторінці. Користувач може взаємодіяти з прикладом за допомогою чекбокса, що дозволяє переключатися між показом всіх посилань та лише зовнішніх посилань.
У цьому прикладі ми використовуємо властивість document.links для отримання колекції всіх посилань (<a>) на веб-сторінці. Потім ми перебираємо цю колекцію за допомогою циклу for...of та виводимо URL кожного посилання в консоль.
// Отримуємо колекцію всіх посилань на сторінці
const links = document.links;
// Перебираємо всі посилання
for (const link of links) {
console.log(link.href); // Виводимо URL посилання
}У цьому прикладі ми використовуємо властивість document.links для пошуку всіх посилань на сторінці, що відповідають певному критерію. Ми перебираємо колекцію посилань за допомогою методу Array.prototype.filter() та виводимо в консоль лише ті посилання, які містять певний рядок у своєму URL.
// Отримуємо колекцію всіх посилань на сторінці
const links = document.links;
// Фільтруємо посилання, що містять "example.com" в URL
const exampleLinks = Array.from(links).filter(link => link.href.includes('example.com'));
// Виводимо відфільтровані посилання в консоль
exampleLinks.forEach(link => {
console.log(link.href);
});