如何为网页多链接设置统一动态HREF变量 避免重复修改

核心疑问解答 #

原生HTML本身没有内置变量存储、属性绑定能力，仅靠HTML无法实现单变量统一管理多个相同href的需求，必须借助JavaScript、服务端模板语法、静态站点生成器模板能力等上层方案实现。

现有JavaScript方案说明 #

执行时机问题 #

你当前的写法是把script标签放在所有相关DOM元素之后，这种情况完全不需要额外绑定onload事件即可正常运行：浏览器按从上到下的顺序解析HTML，执行到script代码时，前面的span、a标签已经完成渲染，不会出现获取不到DOM元素的报错。
只有当你把script放在<head>标签内、或者放在目标DOM元素之前时，才需要把代码包裹在DOMContentLoaded事件或者window.onload事件中，确保DOM加载完成后再执行逻辑。

代码优化建议 #

你当前给每个链接单独加id、逐个修改href的写法在链接数量多的时候维护成本较高，可以通过统一类名批量处理，后续新增链接无需修改JS代码，仅修改一处链接值即可，示例如下：

<!-- 仅需修改这里的data-alink值即可更新所有关联链接 -->
<span style="display:none" id="dynamiclink" data-alink="http://www.google.com"></span>

<!-- 所有需要绑定同个链接的a标签统一加dynamic-link类，无需单独定义id -->
<a href="#" class="dynamic-link">Link 1</a>
<a href="#" class="dynamic-link">Link 2</a>
<a href="#" class="dynamic-link">Link 3</a>
<a href="#" class="dynamic-link">Link 20</a>

<script>
const targetLink = document.getElementById('dynamiclink').dataset.alink;
// 批量替换所有符合类名规则的链接href
document.querySelectorAll('.dynamic-link').forEach(link => {
  link.setAttribute('href', targetLink);
});
</script>

内容的提问来源于stack exchange，提问作者Stalkium