前端页面里的超链接并不总带有清晰的标识，很多锚标签既没有id属性，也没有class属性，只根据文档结构排列。这种情况下，想用document.getElementById这类精确查找方法就不太合适了，必须切换到基于标签名的通用查询。提取href虽然没有太高门槛，但要考虑浏览器的解析差异、动态节点以及批量过滤等问题。
从实际使用来看，获取href有两个常用入口：一个是读取元素对象的href属性，另一个是调用getAttribute方法。两者结果在部分场景中并不相同，后面的内容会通过代码和例子把差异说清楚。
用querySelectorAll获取所有锚标签
如果锚标签没有id或class，最简单直接的方法是使用document.querySelectorAll('a')。这个API接受CSS选择器作为参数，传入标签名a就能匹配文档中所有锚元素，无论它嵌套在哪个容器里。返回结果是一个NodeList，支持forEach遍历，所以不需要先转数组就可以逐项处理。
在遍历过程中，读取链接地址有两种写法。第一种是直接访问anchor.href，这里的href是HTMLAnchorElement对象上的属性，浏览器会把它解析成完整URL。第二种是调用anchor.getAttribute('href')，它返回源码中写在标签内的原始值。如果你只关心相对路径或绝对路径的原始形态，第二种更可靠；如果要在脚本里发起请求或做跳转判断，第一种能直接得到可用的完整地址。
下面这段代码演示了两种读取方式的差异，控制台输出会清楚地显示相同元素得到的不同结果：
// 获取页面内所有锚标签
const anchors = document.querySelectorAll('a');
// 方式一：直接访问href属性，返回浏览器解析后的完整地址
anchors.forEach((anchor, index) => {
console.log(index, anchor.href);
});
// 方式二：读取原始href特性，保留源码中的相对路径
anchors.forEach((anchor) => {
console.log(anchor.getAttribute('href'));
});
这两种方式没有绝对的好坏，要根据具体业务来选。比如有些页面需要把相对路径原样提交到接口，使用getAttribute更合适；而在前端路由跳转前需要拼完整地址时，直接读取href属性可以减少手动拼接逻辑。
批量提取时做数据清洗
真实页面中，锚标签的href值可能非常杂乱。有些是指向页面内锚点的#号，有些是javascript:伪协议，有些甚至没有写href属性。如果只是把querySelectorAll的结果直接映射成数组，返回的链接列表里会混入大量无效数据，后续处理时容易出问题。
为了解决这个问题，可以先使用Array.from把NodeList转换成真正的数组，再通过map获取每个元素的原始href，最后用filter把空值、纯#链接和javascript:开头的项过滤掉。这样得到的就是一组相对干净的链接地址，可以直接用于爬虫抓取、链接检查或统计点击。
function getAllValidHrefs() {
return Array.from(document.querySelectorAll('a'))
.map(anchor => anchor.getAttribute('href'))
.filter(href => {
// 过滤空链接
if (!href) return false;
// 过滤页面内锚点
if (href === '#') return false;
// 过滤伪协议
if (href.startsWith('javascript:')) return false;
return true;
});
}
console.log(getAllValidHrefs());
如果页面比较大，锚标签数量很多，遍历NodeList本身不会带来明显性能瓶颈。真正需要注意的是查询时机。假如链接是由异步请求渲染出来的，必须在数据插入DOM之后再执行查询，否则只能拿到空列表。可以把提取函数放在数据渲染完成的回调里，或者使用MutationObserver监听容器变化后再重新提取。
在事件委托场景中定位锚标签
有些需求不是一次性提取全部链接，而是用户点击某个链接时才获取它的href。如果每个锚标签都单独绑定事件，内存开销大，动态插入的节点还需要重新绑定。事件委托能解决这个问题，它只在父级或document上监听一次点击，利用事件冒泡找到实际点击的锚元素。
在事件处理函数中，event.target可能不是锚标签本身，而是锚标签内部的span或img等子元素。因此不能直接读取target的href，需要调用closest('a')向上查找最近的锚元素。如果返回值存在，再读取它的href属性或使用getAttribute。
document.addEventListener('click', function (event) {
const target = event.target;
// 从实际触发元素向上查找最近的锚标签
const anchor = target.closest('a');
if (!anchor) return;
const link = anchor.getAttribute('href');
if (link && link !== '#') {
console.log('当前点击的链接地址是：', link);
}
});
这里用target.closest('a')比手动写while循环逐层判断parentNode简洁得多，也更容易维护。需要留意的是，closest方法从元素自身开始匹配，所以target本身就是锚标签时也能正确返回。对于很老旧的浏览器，可以用Element.prototype.closest的polyfill补齐，但现代项目基本不用过多担心兼容性。
相对路径与绝对路径的解析差异
前面提到过，直接访问href属性得到的是绝对地址。这里再详细解释一下背后的原理。HTMLAnchorElement接口的href属性受浏览器URL解析机制控制，读取时会把标签内写的相对地址与当前文档基准URL拼接。比如标签内写的是/docs/guide，读取anchor.href会返回类似当前域名加/docs/guide的完整地址。
而getAttribute('href')读取的是DOM属性中的原始值，不会触发URL解析，因此源码里写什么就返回什么。这种差异在需要对链接做归一化处理时非常关键。下面先看一个简单的HTML段落：
<!-- 源码中href写的是相对路径 --> <a href="/docs/guide" title="使用指南">打开指南</a>
如果用JavaScript分别读取这个锚元素，输出结果会明显不同。假设页面地址是当前站点的根路径，直接读取href会得到一个包含协议和域名的完整URL，而getAttribute返回的仍然是原始字符串。脚本里如果要把链接回传到服务端做白名单校验，需要明确应该使用哪个值，否则可能出现校验不一致的情况。
此外，如果源码中写的是完整的绝对地址，两种读取方式结果基本相同，但直接访问href有时会在末尾自动补全斜杠，或者在编码上做归一化。做链接比对时，建议统一使用URL构造器或字符串规范化方法，避免因为末尾斜杠缺失导致误判。
JavaScripthref属性锚标签修改时间：2026-09-25 03:04:27