如何修复document.getElementById获取元素为null导致的children读取错误？

嘿，这个报错的原因很明确——你在尝试访问一个不存在的DOM元素的children属性！当document.getElementById('confirmMsg')找不到ID为confirmMsg的元素时，它会返回null，这时候你再去读取null.children就会触发这个TypeError。

修复方案：先检查元素是否存在，再操作 #

我们可以先把元素存到变量里（避免重复查询DOM，提升性能也更清晰），然后一步步做安全判断：

// 先获取两个元素，存为变量
const confirmMsgElement = document.getElementById('confirmMsg');
const confirmButton = document.getElementById('confirm');

// 先确保confirm按钮存在，再进行后续操作
if (confirmButton) {
  // 只有当confirmMsg元素存在，且它有子元素时，添加错误类
  if (confirmMsgElement && confirmMsgElement.children.length > 0) {
    confirmButton.classList.add('ui-state-error');
  } else {
    confirmButton.classList.remove('ui-state-error');
  }
}

代码解释： #

1. 缓存DOM元素：把getElementById的结果存成变量，避免多次调用相同的DOM查询，这是个能提升代码效率的好习惯。
2. 安全判断层级：
   • 首先检查confirmButton是否存在，防止后续调用classList时因为元素不存在而出错；
   • 然后先判断confirmMsgElement是否存在（null在条件判断里会被视为false），只有元素存在时，才去检查它的children.length，从根源避免了"读取null的属性"这个错误。

这样修改后，不管confirmMsg元素是否存在，代码都能安全执行啦～

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