将外部链接设为橙色
重要程度: 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>
// 为单个链接设置样式
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');