isConnected 是 Node 接口的只读布尔属性，用于高效判断节点是否挂载到当前文档DOM树中；它原生支持主流浏览器，语义明确、性能优于 parentNode 或 contains()，且能准确处理 DocumentFragment 和 iframe 等边界场景。

isConnected 是 Node 接口的一个只读布尔属性，用于直接、高效地判断一个 DOM 节点是否已挂载（attached）到当前文档的活动 DOM 树中。它不依赖事件监听或状态轮询，是现代浏览器（Chrome 51+、Firefox 49+、Safari 10.1+、Edge 79+）原生支持的标准方式。

---

✅ 用法很简单：直接读取属性值

const el = document.getElementById('myDiv');
if (el && el.isConnected) {
  console.log('该节点已在当前文档中，可安全操作');
} else {
  console.log('该节点未挂载（可能被移除、未插入、或属于其他文档如 iframe）');
}

注意：el 必须是一个有效节点对象，否则访问 isConnected 会报错（如 null 或 undefined）。

---

? 挂载（connected）的准确含义

• 节点必须存在于当前 document 的活动 DOM 树中（即能通过 document.body.contains(el) 或 el.ownerDocument === document 且在树中路径可达）；
• 即使节点被 display: none 或 visibility: hidden，只要仍在 DOM 树里，isConnected 仍为 true；
• 如果节点被 remove()、replaceChild() 移除，或从未 appendChild()/insertAdjacentElement() 过，isConnected 为 false；
• 若节点属于另一个 document（比如 <iframe> 内部的节点），即使存在也不算“连接到当前文档”，isConnected 为 false。

---

⚠️ 常见误区与替代方案对比

• ❌ 不要用 parentNode !== null 判断：
  文档片段（DocumentFragment）中的节点有 parentNode，但 isConnected 为 false；
  某些 Shadow DOM 场景下，parentNode 可能是 shadowRoot，但节点仍属当前文档 → isConnected 才是权威依据。

• ❌ 不要依赖 document.contains(el) 代替：
  contains() 需要调用且只能查当前 document，而 isConnected 更轻量、语义更明确，且对 el 自身即可判断，无需上下文。

• ✅ 安全写法（防空、防跨文档）：

  立即学习“Java免费学习笔记（深入）”；

  

  JavaStoryDevelop

  你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

  下载

  function isMounted(node) {
    return node instanceof Node && node.isConnected;
  }

---

? 实际应用场景

• 动态组件卸载前清理副作用（如取消定时器、移除事件监听）：

  const timer = setInterval(() => {
    if (!myEl.isConnected) {
      clearInterval(timer);
      return;
    }
    // 继续更新逻辑
  }, 1000);

• 在 MutationObserver 回调中快速过滤已移除节点：

  observer.observe(document.body, { childList: true, subtree: true });
  observer.observe(document.body, { childList: true, subtree: true });
  observer.observe(document.body, { childList: true, subtree: true });
  observer.observe(document.body, { childList: true, subtree: true });
  
  observer.observe(document.body, { childList: true, subtree: true });
  observer.observe(document.body, { childList: true, subtree: true });
  
  const callback = (records) => {
    records.forEach(record => {
      record.removedNodes.forEach(node => {
        if (node.isConnected === false) {
          // 确认已真正移除，可释放资源
        }
      });
    });
  };

• 渲染前校验（避免向已卸载节点插入内容）：

  if (container.isConnected) {
    container.innerHTML = '<p>新内容</p>';
  }

不复杂但容易忽略