DOM基础测试34：链接元素的选取与操作

[wingmeng]

题目：

---

我的回答：

第 1 题：

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

第 2 题：

let links = document.querySelectorAll(':link');

第 3 题：

使用 querySelectorAll 获取的元素可直接用 forEach 遍历，或者转换为 Array 类型再遍历

// 3.1
[].slice.call(links).filter(link => {
  if (/^javascript:/i.test(link.href)) {
    link.setAttribute('role', 'button');
    return false;
  }

  return true;
})

// 3.2
.filter(link => {
  // 锚点链接
  if (/^#/.test(link.href)) {   // zxx: 有bug
    return true;
  }

  // 站外链接
  if (!(new RegExp(`^${location.host}`, 'i')).test(link.host)) {
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'external nofollow noopener');
    return false;
  }

})

// 3.3
.forEach(link => {
  // 此处接收到的数组只包含以 # 开头的锚点元素（3.2 中已过滤）
  link.setAttribute('rel', 'internal');
});

[wingmeng]

自我评分：一般

优秀、良好、一般、差劲

不足之处：

1. 未充分考虑 forEach 的兼容性；
2. 对锚点链接的匹配正则表达式有 bug（用 link.href 会包含网站域名）。

学习收获：

1. relList；
2. document.links。