当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript获取多个链接href方法

JavaScript获取多个链接href方法

2025-08-31 17:57:44 0浏览收藏

**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 示例：

<div id="container">
  <a class="link" href="https://www.microsoft.com/">Link A</a>
  <a class="link" href="https://www.google.com/">Link B</a>
  <a class="link" href="https://www.apple.com/">Link C</a>
</div>

方法二：使用事件委托

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

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 示例：

<div id="container">
  <a class="link" href="https://www.microsoft.com/">Link A</a>
  <a class="link" href="https://www.google.com/">Link B</a>
  <a class="link" href="https://www.apple.com/">Link C</a>
</div>