<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;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
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;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.