首页 > 文章 > 前端

JavaScript获取多个链接href方法

时间：2025-08-31 17:57:44 456浏览收藏

**JavaScript 获取多个标签 href 值方法：实用教程** 还在为如何使用 JavaScript 获取页面中多个 `` 标签的 href 值而烦恼吗？本教程将深入探讨两种高效的方法，助你轻松实现这一目标。我们将详细讲解如何利用 `querySelectorAll` 和事件委托技术，获取链接的 URL，并在用户点击时弹出提示框，最终实现页面跳转。通过本教程，你将掌握在 JavaScript 中处理多个链接 href 值的实用技巧，为网页开发提供更强大的支持。无论你是前端新手还是经验丰富的开发者，都能从中受益匪浅。

获取多个 <a> 标签的 href 值：JavaScript 教程标签的 href 值：JavaScript 教程" />

本教程旨在解决如何使用纯 JavaScript 获取页面中多个标签的 href 值，并在用户点击链接时，通过弹窗提示用户即将跳转的 URL，最后实现页面跳转。我们将探讨使用 querySelectorAll 和事件委托两种方法，确保所有链接都能正确触发提示和跳转。

在网页开发中，经常需要获取页面上多个具有相同特征的元素，并对它们进行统一的操作。本教程将以获取多个标签的 href 值为例，介绍如何使用 JavaScript 实现这一功能，并在用户点击链接时进行提示和跳转。

方法一：使用 querySelectorAll

querySelectorAll 方法可以获取所有匹配指定 CSS 选择器的元素，返回一个 NodeList 集合。我们可以遍历这个集合，为每个元素添加点击事件监听器。

const links = document.querySelectorAll('.link');

links.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认的跳转行为
    const href = this.href;
    alert('You are going to: ' + href);
    window.location = href; // 跳转到 href 对应的 URL
  });
});

代码解释：

document.querySelectorAll('.link')：获取所有 class 为 "link" 的标签，返回一个 NodeList 集合。
links.forEach(link => { ... })：遍历 NodeList 集合，为每个标签添加事件监听器。
e.preventDefault()：阻止标签的默认跳转行为，防止在弹窗提示之前就跳转页面。
this.href：获取当前点击的标签的 href 属性值。
alert('You are going to: ' + href)：弹出提示框，显示即将跳转的 URL。
window.location = href：将当前页面跳转到 href 对应的 URL。

HTML 示例：


  Link A
  Link B
  Link C

方法二：使用事件委托

事件委托是指将事件监听器添加到父元素上，利用事件冒泡机制，当子元素触发事件时，父元素也能监听到。这种方法可以减少事件监听器的数量，提高性能。

const container = document.querySelector('#container');

container.addEventListener('click', function(e) {
  if (e.target.classList.contains('link')) {
    e.preventDefault();
    const href = e.target.href;
    alert('You are going to: ' + href);
    window.location = href;
  }
});

代码解释：

document.querySelector('#container')：获取 id 为 "container" 的父元素。
container.addEventListener('click', function(e) { ... })：为父元素添加点击事件监听器。
e.target：表示触发事件的元素，即被点击的元素。
e.target.classList.contains('link')：判断被点击的元素是否包含 "link" class，如果是，则执行后续操作。
e.preventDefault()：阻止标签的默认跳转行为。
e.target.href：获取被点击的标签的 href 属性值。
alert('You are going to: ' + href)：弹出提示框，显示即将跳转的 URL。
window.location = href：将当前页面跳转到 href 对应的 URL。

HTML 示例：


  Link A
  Link B
  Link C

总结

本教程介绍了两种使用纯 JavaScript 获取多个标签的 href 值的方法：querySelectorAll 和事件委托。querySelectorAll 方法简单直观，适用于元素数量较少的情况；事件委托方法可以减少事件监听器的数量，提高性能，适用于元素数量较多的情况。在实际开发中，可以根据具体情况选择合适的方法。

注意事项：

确保 HTML 结构正确，标签包含 href 属性。
如果使用了事件委托，需要确保父元素存在且能够监听子元素的点击事件。
e.preventDefault() 方法可以阻止默认的跳转行为，确保在弹窗提示之后再进行跳转。

希望本教程能够帮助你更好地理解和使用 JavaScript 获取多个标签的 href 值。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript获取多个链接href方法》文章吧，也可关注golang学习网公众号了解相关技术文章。