复选框状态验证问题：Uncaught TypeError报错排查

我尝试验证复选框是否被勾选，使用了以下代码：

HTML代码 #

<body>
<input type="checkbox" id="terms" name="terms" />
<label for="terms">Agree with terms</label>
</body>

JavaScript代码 #

let checkbox = document.querySelector("#terms");
console.log(checkbox.checked);

但控制台返回错误：

Uncaught TypeError: Cannot read properties of null (reading 'checked')

已将代码简化至最小示例，排除项目干扰后仍报错，疑问：该功能是否有更新？

这个报错和功能更新无关，核心原因是JavaScript代码在DOM元素加载完成前就执行了，导致document.querySelector("#terms")找不到对应元素，返回null，读取null的checked属性就会触发类型错误。

以下是三种可行的解决方法：

1. 将JS代码放在标签末尾 #

把脚本放在页面最后，确保DOM元素已经被浏览器解析完成：

<body>
<input type="checkbox" id="terms" name="terms" />
<label for="terms">Agree with terms</label>

<script>
let checkbox = document.querySelector("#terms");
console.log(checkbox.checked);
</script>
</body>

2. 监听DOMContentLoaded事件 #

通过事件监听，等待DOM完全加载后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  let checkbox = document.querySelector("#terms");
  console.log(checkbox.checked);
});

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

defer属性会让脚本在DOM加载完成后再执行，同时不阻塞页面渲染：

<script defer>
let checkbox = document.querySelector("#terms");
console.log(checkbox.checked);
</script>

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