标签的 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
});
});代码解释：
立即学习“Java免费学习笔记（深入）”；
- 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 示例：
方法二：使用事件委托
事件委托是指将事件监听器添加到父元素上，利用事件冒泡机制，当子元素触发事件时，父元素也能监听到。这种方法可以减少事件监听器的数量，提高性能。
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免费学习笔记（深入）”；
- 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 示例：
总结
本教程介绍了两种使用纯 JavaScript 获取多个 标签的 href 值的方法：querySelectorAll 和事件委托。querySelectorAll 方法简单直观，适用于元素数量较少的情况；事件委托方法可以减少事件监听器的数量，提高性能，适用于元素数量较多的情况。在实际开发中，可以根据具体情况选择合适的方法。
注意事项：
- 确保 HTML 结构正确， 标签包含 href 属性。
- 如果使用了事件委托，需要确保父元素存在且能够监听子元素的点击事件。
- e.preventDefault() 方法可以阻止默认的跳转行为，确保在弹窗提示之后再进行跳转。
希望本教程能够帮助你更好地理解和使用 JavaScript 获取多个 标签的 href 值。
