<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.