Node.isConnected 在现代浏览器中可靠,Chrome 51+、Firefox 51+、Safari 10.1+、Edge 79+ 支持;但 IE 不支持,且对 DocumentFragment、Shadow DOM 未挂载 host 或克隆节点返回 false。

Node.isConnected 在现代浏览器中是否可靠
Node.isConnected 是 DOM Level 4 标准引入的只读布尔属性,只要节点(包括元素、文本节点、注释等)处于活动文档的 DOM 树中(即已挂载),就返回 true;否则为 false。它比手动遍历 parentNode 或检查 document.body.contains(node) 更直接、更高效。
但要注意:IE 完全不支持,Safari 10.1+、Chrome 51+、Firefox 51+、Edge 79+ 才可用。若需兼容旧版 Safari 或 IE,不能单独依赖此属性。
常见误判场景:Fragment、Shadow DOM 和 detached 克隆节点
Node.isConnected 只反映「是否在当前文档的活动树中」,不关心节点是否可见、是否在 viewport 内,也不自动穿透 Shadow DOM 边界。容易踩坑的地方包括:
- 从
DocumentFragment中创建的节点,即使已调用fragment.appendChild(el),el.isConnected仍是false—— 因为 fragment 本身不在文档中 - Shadow DOM 中的节点,若其 shadow host 尚未挂载,那么内部节点的
isConnected也是false;但一旦 host 挂载,内部节点会同步变为true - 用
node.cloneNode(true)得到的副本默认isConnected === false,哪怕原节点已挂载
与 document.contains() 的关键区别和选型建议
document.contains(node) 是更老的 API,功能类似但语义不同:它只检查节点是否是 document 的后代(含 shadow root 下的节点,取决于浏览器实现),而 node.isConnected 是节点自身的状态,且对所有 Node 实例都有效(比如 Text 节点也能直接查)。
立即学习“前端免费学习笔记(深入)”;
实操建议:
- 判断任意节点(含文本、注释)是否已挂载?优先用
node.isConnected - 需要兼容 IE 或极老 Safari?回退到
node.parentNode !== null && node.ownerDocument === document(注意:这不能完全等价,比如节点在 iframe 的 document 中时会误判) - 要确认节点是否在当前页面主文档(而非 iframe)中?仍推荐
node.isConnected && node.ownerDocument === document
实际调试中怎么快速验证 isConnected 状态
在 DevTools 控制台中,选中一个元素后,可直接输入:
console.log($0.isConnected); // $0 是当前选中节点
但要注意:如果节点刚被 JS 移除(如 el.remove()),控制台里仍可能显示该节点对象,此时 isConnected 已为 false;而如果节点只是被 display: none 或 visibility: hidden 隐藏,isConnected 依然是 true。
容易被忽略的是异步时机问题:比如在 requestAnimationFrame 回调里读取 isConnected,可能比在 setTimeout(fn, 0) 里更早拿到 true——因为前者在样式计算前执行,后者在任务队列尾部,DOM 挂载可能已发生也可能尚未完成。



















