使用JavaScript为Script标签添加自定义data属性时出现setAttribute读取错误的问题与解决方法

需求背景 #

我想要实现的效果是：获取URL中哈希值（#之后的内容），给页面上指定的<script>标签添加自定义data-segment属性，让页面加载完成后执行该脚本时，这个属性已经填充好了对应的值。举个例子，当URL是https://domain/#the-hash-tag时，data-segment的属性值就应该是the-hash-tag。

初始代码与遇到的报错 #

我一开始写的代码是这样的：

var afterHashtag = window.location.hash.substr(1); 
//console.log(afterHashtag) 
document.getElementById('widget').setAttribute('data-segment', afterHashtag);

对应的<script>标签：

<script id="widget" type="text/javascript" src="https://domain/sdk.js" data-segment=""></script>

但运行时直接抛出了错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute')

我查了相关的讨论线程，但一开始没找到适配场景的方案，后来参考了关于DOM元素查找失败的相关内容，才找到了解决办法。

问题根源 #

这个报错的核心原因很简单：当你的JavaScript代码执行时，目标<script>元素还没有被浏览器解析并添加到DOM树中。这时候用document.getElementById('widget')会返回undefined，自然就没法调用setAttribute方法了。

最终解决方案 #

我做了两个关键修改，成功解决了问题：

1. 给目标<script>标签添加defer属性：defer属性会告诉浏览器，这个脚本要等到整个DOM解析完成后再执行，而且不会阻塞页面的渲染流程，同时还能保证脚本的执行顺序和它们在HTML中的顺序一致。
2. 将赋值的JavaScript代码放在目标<script>标签的后面：确保执行JS代码时，目标元素已经存在于DOM中，能被正常找到。

修改后的代码如下：

HTML部分

<script id="widget" type="text/javascript" src="https://domain/sdk.js" data-segment="" defer></script>

JavaScript部分

var afterHashtag = window.location.hash.substr(1); 
document.getElementById('widget').setAttribute('data-segment', afterHashtag);

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