kembali ke pelajaran
Materi ini hanya tersedia dalam bahasa berikut: ????????, English, Espa??ol, Fran??ais, Italiano, ?????????, ?????????, ??????????????, ????????????????????, ????????????. Tolong, menerjemahkan ke dalam Indonesia.

Make external links orange

pentingnya: 3

Make all external links orange by altering their style property.

A link is external if:

  • Its href has :// in it
  • But doesn???t start with http://internal.com.

Example:

<a name="list">the 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>
  // setting style for a single link
  let link = document.querySelector('a');
  link.style.color = 'orange';
</script>

The result should be:

Buka sandbox untuk tugas tersebut.

First, we need to find all external references.

There are two ways.

The first is to find all links using document.querySelectorAll('a') and then filter out what we need:

let links = document.querySelectorAll('a');

for (let link of links) {
  let href = link.getAttribute('href');
  if (!href) continue; // no attribute

  if (!href.includes('://')) continue; // no protocol

  if (href.startsWith('http://internal.com')) continue; // internal

  link.style.color = 'orange';
}

Please note: we use link.getAttribute('href'). Not link.href, because we need the value from HTML.

???Another, simpler way would be to add the checks to CSS selector:

// look for all links that have :// in href
// but href doesn't start with http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

links.forEach(link => link.style.color = 'orange');

Buka solusi di kotak pasir.