如何用JS通过Legacy DOM与W3C DOM访问HTML超链接数组

• 你写的W3C DOM获取单个链接的代码document.getElementById("one")语法正确，这是W3C DOM标准中通过id匹配单个元素的核心方法。
• 你写的Legacy DOM对应代码有两处问题：
  1. 方法名拼写错误：正确的标签选择方法为document.getElementsByTagName("a")，你写的方法名中Element未加复数后缀s，运行会直接报错。
  2. 归类错误：getElementsByTagName属于W3C DOM Level 1 定义的标准方法，并非Legacy DOM（DOM 0级）的实现。Legacy DOM访问超链接不需要调用选择方法，直接访问内置属性即可。
• 你开头手动定义的var links = [<a>...</a>]是非法JS语法，HTML标签不能直接裸写在JS数组字面量中，所有DOM节点必须通过DOM API从文档获取，或通过document.createElement创建后再加入集合。

W3C DOM 标准方法 #

W3C DOM提供了多类符合规范的选择方法，返回值为类数组格式的HTMLCollection或NodeList：

• 获取单个指定id的链接：document.getElementById("链接id值")
• 获取全文档所有<a>标签集合：document.getElementsByTagName("a")
• 现代W3C标准支持CSS选择器语法：document.querySelectorAll("a")获取所有匹配链接，document.querySelector("a")获取第一个匹配链接

Legacy DOM（传统0级DOM）方法 #

Legacy DOM是早期浏览器实现、后续被规范兼容保留的快捷访问方式，直接通过document内置属性获取集合，不需要调用选择函数：

• 获取全文档所有带href属性的超链接（包含<a>和<area>标签）：document.links，这是Legacy DOM下访问超链接数组的标准写法。

两类DOM方法返回的都是类数组对象，和普通数组的索引访问逻辑一致，通用for循环写法兼容所有浏览器环境：

W3C DOM 获取集合后的遍历示例 #

// 通过W3C标准方法获取所有a标签集合
const w3cLinkList = document.getElementsByTagName("a");
// 普通for循环遍历
for (let i = 0; i < w3cLinkList.length; i++) {
  const link = w3cLinkList[i];
  // 此处编写自定义逻辑，示例为打印链接信息
  console.log(`序号${i+1}的链接：地址为${link.href}，id为${link.id}`);
  // 可直接操作节点，比如修改样式、绑定点击事件等
}

Legacy DOM 获取集合后的遍历示例 #

// 通过Legacy DOM内置属性获取超链接集合
const legacyLinkList = document.links;
// 普通for循环遍历
for (let i = 0; i < legacyLinkList.length; i++) {
  const link = legacyLinkList[i];
  // 操作逻辑和W3C方式完全一致，示例为修改链接打开方式
  link.target = "_blank";
}

兼容提示：如果需要适配IE8及更早版本的老旧浏览器，循环变量请将let替换为var；若要使用forEach等数组方法，先通过Array.prototype.slice.call(链接集合)将类数组对象转为真正的数组再调用。

内容的提问来源于stack exchange，提问作者Sam Wong