外部リンクをオレンジにする
重要性: 3
style プロパティを変更することで、すべての外部リンクをオレンジにしてください。
次のものが外部リンクです:
hrefの中に://がある場合- しかし、
http://internal.comから始まらない場合
例:
<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>
// 単一リンクの style を設定
let link = document.querySelector('a');
link.style.color = 'orange';
</script>結果は次のようになるはずです:
最初に、すべての外部参照を見つける必要があります。
2つの方法があります。
1つ目は 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 からの値が必要なためです。
…もう1つ、よりシンプルな方法は 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');