如何在没有ID的情况下通过JavaScript获取HTML锚点标签的href属性

在网页开发中，经常会遇到需要读取页面里<a>标签指向地址的情况。如果锚点标签没有id，我们就不能依靠getElementById来定位，但仍然可以通过其他DOM接口顺利拿到它们的href属性。

使用 getElementsByTagName 获取所有锚点

最简单的方式是拿到文档中所有的<a>标签，然后遍历这个集合。每个元素都有href属性，可以直接读取。

// 获取页面上所有的锚点标签
var links = document.getElementsByTagName('a');
// 遍历并输出href
for (var i = 0; i < links.length; i++) {
  // 获取完整链接地址
  var hrefValue = links[i].href;
  console.log('第' + i + '个链接: ' + hrefValue);
}

使用 querySelectorAll 按条件筛选

如果只想获取某些特定的锚点，比如带有class的或者href以https开头的，可以使用属性选择器。

// 选取所有href以https开头的锚点
var secureLinks = document.querySelectorAll('a[href^="https"]');
secureLinks.forEach(function(el) {
  // 打印对应的href
  console.log(el.getAttribute('href'));
});

通过父容器缩小范围

当页面结构清晰时，可以先定位父节点，再在内部查找锚点，避免影响其他区域。

<div id="content">
  <a href="https://ipipp.com/page1">页面一</a>
  <a href="https://ipipp.com/page2">页面二</a>
</div>

// 先获取父容器
var box = document.getElementById('content');
// 在容器内查找所有a标签
var innerLinks = box.getElementsByTagName('a');
for (var j = 0; j < innerLinks.length; j++) {
  // 使用getAttribute更稳妥
  console.log(innerLinks[j].getAttribute('href'));
}

注意事项

• href属性在DOM里返回的是绝对路径，而getAttribute('href')可能返回书写时的相对路径。
• 如果页面是动态生成的，建议在DOMContentLoaded事件之后执行脚本。
• 遍历类数组对象时不要直接用数组方法，可以转成数组再处理。

在没有id的情况下，灵活运用标签名、属性选择器和层级关系，就能稳定获取任意锚点的href。

JavaScriptHTML_anchorhref_attribute修改时间：2026-07-29 14:33:23