如何通过 JavaScript 获取页面所有链接地址

最直接的方式是用JavaScript选中所有<a href>标签并提取href属性值：使用document.querySelectorAll('a[href]')获取有效链接，el.href返回解析后的绝对URL，再过滤空值、伪协议（如javascript:、mailto:）并去重。

要获取页面所有链接地址，最直接的方式是用 javascript 选中所有 <a> 标签，再提取它们的 href 属性值。注意：需确保链接有效、可访问，且不包含空值或仅含空白字符。

使用 document.querySelectorAll 获取全部 <a> 元素

这是推荐方法，兼容性好，返回的是静态 NodeList，便于遍历：

• 选择器 "a[href]" 可自动过滤掉没有 href 属性的 <a> 标签（如纯锚点或 JS 绑定的按钮）
• 避免用 "a" 全量匹配，否则可能拿到无意义的空链接
• 示例代码：
    const links = Array.from(document.querySelectorAll('a[href]'))
      .map(el => el.href);

处理相对路径与绝对路径

el.href 返回的是解析后的绝对 URL（浏览器自动转换），比 el.getAttribute('href') 更可靠：

• el.href 始终返回完整 URL（如 https://example.com/path/），适合直接跳转或存储
• el.getAttribute('href') 返回原始字符串（可能是 /about 或 #section1），需手动补全
• 若需保留原始写法（比如做静态分析），才用 getAttribute；一般场景优先用 href

过滤无效或重复链接

实际页面中常存在重复链接、空链接、JavaScript 伪链接（如 javascript:void(0)）或邮件链接（mailto:），可根据需要剔除：

• 排除空值和仅空白字符：href.trim() === ''
• 排除伪协议：href.startsWith('javascript:') || href.startsWith('mailto:')
• 去重可用 new Set()：
    const uniqueLinks = [...new Set(links.filter(href => href && !href.startsWith('javascript:')))]

考虑动态加载内容

如果页面通过 AJAX 或框架（如 React、Vue）异步渲染链接，初始 DOM 可能不包含全部链接：

立即学习“Java免费学习笔记（深入）”；

• 简单方案：延迟执行（如 setTimeout 或监听 DOMContentLoaded 后再查）
• 健壮方案：配合 MutationObserver 监听新增的 <a> 节点
• 单页应用建议：在路由切换后主动触发采集逻辑，而非只依赖页面加载时机