使用JavaScript将页面中的所有链接(href)设置为"#"

基础概念

在JavaScript中，可以通过DOM操作来获取和修改HTML元素属性。链接在HTML中通常用<a>标签表示，其目标地址由href属性决定。

实现方法

方法1：使用getElementsByTagName

// 获取页面中所有<a>标签
var links = document.getElementsByTagName('a');

// 遍历所有链接并设置href为"#"
for (var i = 0; i < links.length; i++) {
    links[i].href = "#";
}

方法2：使用querySelectorAll（更现代的方法）

// 获取所有带有href属性的<a>标签
var links = document.querySelectorAll('a[href]');

// 使用forEach遍历（注意：NodeList的forEach需要现代浏览器支持）
links.forEach(function(link) {
    link.href = "#";
});

方法3：使用jQuery（如果项目中已引入jQuery）

$('a[href]').attr('href', '#');

注意事项

1. 性能考虑：对于大型页面，获取和修改大量元素可能影响性能，建议在DOM加载完成后执行（如放在DOMContentLoaded事件中）。
2. 避免影响锚点：如果只想修改外部链接而保留页面内锚点(#开头的链接)，可以添加条件判断：
3. 避免影响锚点：如果只想修改外部链接而保留页面内锚点(#开头的链接)，可以添加条件判断：
4. 事件处理：修改href后，可能需要额外处理点击事件，因为默认行为会跳转到页面顶部。
5. 框架兼容性：在React/Vue等框架中，直接操作DOM可能不是最佳实践，应考虑使用框架提供的方法。

应用场景

1. 临时禁用页面所有链接
2. 创建演示或原型时简化交互
3. 在特定条件下阻止导航行为

替代方案

如果目的是阻止链接的默认行为而不改变href，可以考虑：

document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
    });
});

这种方法会保留原始href值但阻止导航行为。