如何将链接的href属性值存储到变量中？尝试失败附JSFiddle链接

嘿，我来帮你搞定把链接href属性值存储到变量里的问题～

下面是几种基于原生JavaScript的实现方法，你可以根据自己的HTML结构来选择，同时我也会列出一些常见的失败原因供你排查：

1. 通过ID定位单个链接 #

如果你的链接有唯一ID，比如：

<a href="https://example.com" id="targetLink">示例链接</a>

可以这样获取并存储href：

// 先获取对应的DOM元素
const targetLink = document.getElementById('targetLink');
// 存储完整的绝对URL到变量
const linkFullHref = targetLink.href;
// 如果需要HTML里写的原始路径（比如相对路径），用getAttribute
const linkOriginalHref = targetLink.getAttribute('href');

⚠️ 注意：element.href会返回浏览器解析后的完整绝对URL，而getAttribute('href')会返回你在HTML中写入的原始值。

2. 通过类名/标签名批量获取链接 #

如果页面上有多个同类型的链接，比如带特定类名的导航链接：

<a href="/home" class="nav-item">首页</a>
<a href="/profile" class="nav-item">个人中心</a>

可以批量获取并存储所有href：

// 获取所有带nav-item类的链接
const navLinks = document.querySelectorAll('.nav-item');
// 把每个链接的href存入数组
const navHrefs = Array.from(navLinks).map(link => link.href);
// 如果只需要第一个链接的href
const firstNavHref = navLinks[0]?.href;

用?.是为了避免页面中没有匹配元素时出现报错。

3. 点击链接时动态获取href #

如果想在用户点击链接的瞬间获取它的href，可以绑定点击事件：

// 给页面添加全局点击监听
document.addEventListener('click', function(e) {
  // 判断点击的元素是链接
  if (e.target.tagName === 'A') {
    e.preventDefault(); // 可选，阻止链接默认跳转行为
    const clickedLinkHref = e.target.href;
    console.log(clickedLinkHref); // 这里可以将clickedLinkHref存入变量做后续处理
  }
});

常见失败原因排查 #

你之前尝试没成功，大概率是这些问题：

• 代码执行时机不对：如果JS代码在DOM还没加载完成时就运行，会找不到目标元素。可以把JS代码放在</body>标签前，或者用DOMContentLoaded包裹：

document.addEventListener('DOMContentLoaded', function() {
  // 这里写获取href的代码
});

• 选择器书写错误：比如ID选择器没加#、类选择器没加.，或者标签名拼写错误。
• 元素是动态生成的：如果链接是通过JS动态添加到页面的，需要在元素生成完成后再执行获取href的代码。

内容的提问来源于stack exchange，提问作者Mustafa.B