Зробіть зовнішні посилання помаранчевими
важливість: 3
Зробіть всі зовнішні посилання помаранчевими, змінюючи властивість style.
Посилання є зовнішнім, якщо:
- В його
hrefє:// - Але не починається з
http://internal.com.
Приклад:
<a name="list">список</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
<li><a href="local/path">local/path</a></li>
<li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
<li><a href="http://nodejs.org">http://nodejs.org</a></li>
<li><a href="http://internal.com/test">http://internal.com/test</a></li>
</ul>
<script>
// налаштування style для одного посилання
let link = document.querySelector('a');
link.style.color = 'orange';
</script>Результат повинен бути:
По-перше, нам потрібно знайти всі зовнішні посилання.
Є два способи.
Перше – знайти всі посилання, використовуючи document.querySelectorAll('a'), а потім відфільтровувати те, що нам потрібно:
let links = document.querySelectorAll('a');
for (let link of links) {
let href = link.getAttribute('href');
if (!href) continue; // немає атрибуту
if (!href.includes('://')) continue; // немає протоколу
if (href.startsWith('http://internal.com')) continue; // внутрішня
link.style.color = 'orange';
}Будь ласка, зверніть увагу: ми використовуємо link.getAttribute('href'). Не link.href тому, що нам потрібна властивість з HTML.
…Інший, простий спосіб полягає в тому, щоб додати перевірки до селектора CSS:
// шукати всі посилання, які мають :// у href
// але href не починається з http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);
links.forEach(link => link.style.color = 'orange');