en.javascript.info/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
Ilya Kantor ab9ab64bd5 up
2017-03-21 14:41:49 +03:00

952 B

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