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-адрес або підрахунок кількості посилань.

правити

Порада

Для пошуку конкретного посилання за його атрибутами (наприклад, href або target), використовуйте методи фільтрації масиву, такі як filter() або find(). Це дозволить вам швидко знаходити і працювати з необхідними посиланнями.

автор: Bond правити

Порада

Перед тим як взаємодіяти з посиланнями на сторінці, переконайтеся, що вони доступні і мають відповідні атрибути. Використання document.links дозволяє вам зручно виконувати операції з багатьма посиланнями одночасно, що є дуже корисним для роботи з великими обсягами контенту.

автор: Bond правити

Порада

Пам'ятайте, що document.links повертає HTMLCollection, який не є звичайним масивом, тому вам може знадобитися перетворити його в масив, щоб використовувати всі методи масиву. Наприклад:

const linksArray = Array.from(document.links);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.links

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	61	4	≤12.1	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	61	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Document: links property</h2>
  <p class="description">Повертає колекцію всіх елементів посилань на сторінці.</p>
</header>
<main>
  <a href="#">Посилання #1</a>
  <a href="#">Посилання #2</a>
  <a href="https://google.com">Посилання #2</a>
  <br>
  <div class="result">
    <label>
      <input type="checkbox" id="toggleExternalLinks"> Показати лише зовнішні посилання
    </label>
    <ul id="linksList"></ul>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

// Функція для визначення, чи посилання є зовнішнім
function isExternalLink(link) {
  const currentHost = window.location.host;
  const linkHost = new URL(link.href).host;
  return linkHost !== currentHost;
}

// Отримуємо колекцію посилань
const links = document.links;

// Функція для оновлення списку посилань
function updateLinksList() {
  const linksList = document.getElementById('linksList');
  linksList.innerHTML = '';

  const toggleExternalLinks = document.getElementById('toggleExternalLinks').checked;

  Array.from(links).forEach(link => {
    const isExternal = isExternalLink(link);
    if (!toggleExternalLinks || toggleExternalLinks && isExternal) {
      const listItem = document.createElement('li');
      const linkElement = document.createElement('a');
      linkElement.href = link.href;
      linkElement.textContent = link.href;
      linkElement.target = isExternal ? '_blank' : '_self';
      listItem.appendChild(linkElement);
      linksList.appendChild(listItem);
    }
  });
}

// Оновлюємо список посилань при завантаженні сторінки
updateLinksList();

// Оновлюємо список посилань при зміні значення чекбокса
document.getElementById('toggleExternalLinks').addEventListener('change', updateLinksList);
//# sourceURL=pen.js

// Отримуємо колекцію всіх посилань на сторінці
const links = document.links;

// Перебираємо всі посилання
for (const link of links) {
  console.log(link.href); // Виводимо 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);
});