开发发票软件时JS早于HTML加载致document.getElementById()返回null求解决

当JavaScript代码在HTML元素渲染前执行时，就会出现document.getElementById()返回null的情况，以下是几种可行的解决方法：

1. 将JS脚本放在HTML末尾 #

把你的<script>标签放在</body>闭合标签之前，浏览器会先渲染完所有HTML元素再执行JS代码：

<body>
  <!-- 所有HTML内容 -->
  <div id="invoice-container"></div>

  <!-- JS脚本放在这里 -->
  <script src="your-invoice-script.js"></script>
</body>

2. 使用DOMContentLoaded事件监听 #

在JS代码中监听DOMContentLoaded事件，确保DOM完全加载后再执行元素获取逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const element = document.getElementById('invoice-container');
  // 在这里写操作元素的代码
});

这个方法允许脚本放在HTML任意位置，只要核心逻辑包裹在事件监听内即可。

3. 给script标签添加defer属性 #

给引入JS的<script>标签加上defer属性，浏览器会在HTML解析完成后执行脚本，同时脚本加载是异步的，不会阻塞HTML渲染：

<head>
  <script src="your-invoice-script.js" defer></script>
</head>

注意：defer仅对带src属性的外部脚本生效，内联脚本无法使用该属性。

4. DOM操作场景避免使用async #

async属性会异步加载脚本，但脚本加载完成后会立即执行，不管HTML是否解析完毕。如果你的代码需要操作DOM，不建议用async，它更适合统计类不依赖DOM的脚本。

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