Uncaught TypeError：无法设置null的innerHTML、style属性问题求助

安全阿岳

2026-9-29

报错根因

该报错的本质是 document.querySelector("#time") 没有匹配到页面上对应的DOM元素，返回了null，对null访问innerHTML属性就会抛出类型错误。

即便你已经把<script>标签放在<body>末尾，仍然触发该错误有几个常见原因：

HTML元素id属性和JS选择器的拼写、大小写不匹配，DOM选择器对大小写敏感
页面使用了Vue/React/Angular等前端框架，目标元素是框架动态渲染生成的，<script>执行时框架还没完成组件挂载，DOM还没生成
目标元素被其他脚本提前移除，或者被包裹在条件渲染逻辑中，执行JS时元素没有挂载到DOM树上
你的脚本本身是动态插入到页面中的，没有等待DOM加载完成就执行了

解决方案

1. 加元素存在性兜底判断

不管什么场景，操作DOM前先判断元素是否存在，避免直接报错：

// Time Element
var time = document.querySelector("#time");
// Output
let digital = `${digitalHours}:${digitalMin}`;
// 先判断元素存在再操作
if (time) {
  time.innerHTML = digital;
}

2. 适配前端框架的执行时机

如果你用了前端框架，把DOM操作逻辑放到框架提供的DOM挂载完成的生命周期钩子中：

Vue2：写在mounted钩子内
Vue3：写在onMounted回调内
React：写在依赖为空数组的useEffect回调内
Angular：写在ngAfterViewInit钩子内

3. 全局监听DOM加载完成事件

如果是原生开发场景，可以用DOMContentLoaded事件做兜底，确保所有初始HTML解析完成后再执行DOM操作：

document.addEventListener('DOMContentLoaded', function() {
  var time = document.querySelector("#time");
  let digital = `${digitalHours}:${digitalMin}`;
  if (time) {
    time.innerHTML = digital;
  }
})