JS节点操作报错主因是“找不见元素”或“动错了对象”，需先验证节点存在性与可操作性，再排查调用时机、权限及跨域/Shadow DOM限制。
JS 节点操作报错，多数不是语法问题，而是“找不见元素”或“动错了对象”。核心排查逻辑是：先确认节点是否存在、是否可操作，再检查调用时机和权限。下面分四类常见场景讲清楚。
节点不存在就调用方法
最典型的是 document.getElementById('xxx') 返回 null，接着调用 .addEventListener 或 .innerHTML，直接报 TypeError: Cannot read property 'xxx' of null。
常见原因：
- DOM 还没加载完，脚本就执行了（比如 script 放在 head 里，没加
DOMContentLoaded） - ID 写错、大小写不一致、拼写错误（JS 区分大小写）
- 元素是异步渲染的（比如 Vue/React 组件、AJAX 插入的内容），脚本执行时它还没出现
建议做法：
- 用
console.log(document.getElementById('xxx'))看返回值，不为null再继续 - 确保脚本放在
</body>前，或包裹在DOMContentLoaded中 - 异步插入的节点，改用事件委托（如给父容器绑定
click，用e.target.matches('.btn')判断）
操作了不可写属性或只读节点
比如对文本节点调用 .appendChild()，或对 document.body 外的 DocumentFragment 直接设 .innerHTML，会报 TypeError: Cannot set property 'innerHTML' of null 或类似提示。
关键点：
-
document.createTextNode()返回的是纯文本节点，不能当容器用 -
document.createDocumentFragment()是离线节点，可以 append，但不能直接设 innerHTML（需先 append 子节点） - 某些属性只读，比如
node.nodeType、node.nodeName，赋值会静默失败或报错
验证方式：
- 用
node.nodeType === 1确认是元素节点（1=Element，3=Text，8=Comment） - 打印
node.constructor.name看类型，避免误把 DocumentFragment 当成 Element
跨 iframe 或 Shadow DOM 访问受限
在 iframe 里操作主页面元素，或主页面想改 iframe 里的节点，容易报 SecurityError 或 TypeError: Cannot read property 'xxx' of null；Shadow DOM 内部节点默认也对外部 JS 隐藏。
注意边界：
- 同源 iframe 可用
iframe.contentDocument访问，跨域则完全禁止（CORS 策略） - Shadow DOM 需显式设置
{ mode: 'open' }才能通过element.shadowRoot获取，'closed'模式无法访问 - 用
element.attachShadow({mode: 'open'})创建后，所有子节点都只在 shadow root 下有效，外部 querySelector 找不到
事件监听器绑定/移除不匹配
比如用匿名函数绑定：btn.addEventListener('click', () => {...})，之后想 removeEventListener 却找不到引用，导致重复绑定或无法解绑；或者监听器里用了已销毁的节点，运行时报 Cannot read property 'xxx' of null。
稳妥做法：
- 绑定时用具名函数或变量存引用：
const handler = () => {...}; btn.addEventListener('click', handler) - 移除前先检查节点是否还存在：
if (btn && btn.parentNode) { btn.removeEventListener('click', handler) } - 组件销毁时统一清理（如 React 的 useEffect cleanup、Vue 的 beforeUnmount）
