Uncaught (in promise) TypeError: Cannot set properties of null (setting 'checked')

### 解析 JavaScript 中 `TypeError` 错误 当遇到 `Uncaught (in promise) TypeError: Cannot set properties of null (setting 'checked')` 这样的错误时，通常是因为尝试操作一个未定义或不存在的 DOM 元素。为了防止此类错误发生，在访问和修改 DOM 元素之前应确保其确实存在。 #### 使用 `window.onload` 确保 DOM 完全加载 为了避免因 DOM 尚未完全加载而导致无法找到目标元素的情况，可以将脚本封装到 `window.onload` 函数内执行[^3]： ```javascript window.onload = function() { const checkboxElement = document.getElementById('myCheckbox'); if (checkboxElement !== null) { checkboxElement.checked = true; } }; ``` 此代码片段会在页面上的所有资源都已加载完毕后再运行，从而减少找不到指定 ID 的风险。 #### 添加健壮性检查 即使使用了 `window.onload`，仍然建议在设置属性前先验证对象是否存在，以增强程序的鲁棒性和可维护性[^2]: ```javascript const checkboxElement = document.querySelector('#myCheckbox'); if (checkboxElement) { checkboxElement.checked = false; // 或者其他逻辑处理 } else { console.error("The element with id='myCheckbox' was not found."); } ``` 通过这种方式可以在调试阶段更容易定位问题所在，并提供更友好的反馈信息给开发者。 #### 防止多次赋值 `onload` 事件处理器 需要注意的是，直接覆盖 `window.onload` 可能会意外替换掉已经存在的 onload 处理器。因此推荐采用如下方式来安全地附加多个 onload 回调函数: ```javascript function addOnLoadCallback(callback) { let oldOnLoad = window.onload; if (typeof window.onload != 'function') { window.onload = callback; } else { window.onload = function() { if (oldOnLoad) { oldOnLoad(); } callback(); }; } } addOnLoadCallback(function(){ const checkboxElement = document.getElementById('myCheckbox'); if(checkboxElement){ checkboxElement.checked = !checkboxElement.checked; } }); ``` 这种方法不仅解决了原始问题，还提高了代码的安全性和兼容性。