获取多个 标签的 href 值：JavaScript 教程

标签的 href 值：javascript 教程" />

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

在网页开发中，经常需要获取页面上多个具有相同特征的元素，并对它们进行统一的操作。本教程将以获取多个 <a> 标签的 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
  });
});

代码解释：

立即学习“Java免费学习笔记（深入）”；

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

HTML 示例：

<div id="container">
  <a class="link" href="https://www.php.cn/link/58f9067fdaf69fdde42cf95d8daacfde">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>

方法二：使用事件委托

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

智标领航

专注招投标业务流程的AI助手，智能、高效、精准、易用！

117

查看详情

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;
  }
});

代码解释：

立即学习“Java免费学习笔记（深入）”；

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

HTML 示例：

<div id="container">
  <a class="link" href="https://www.php.cn/link/58f9067fdaf69fdde42cf95d8daacfde">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>

总结

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

注意事项：

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

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

以上就是获取多个 标签的 href 值：JavaScript 教程的详细内容，更多请关注php中文网其它相关文章！