怎么在 HTML 运行环境中通过 Node.contains 方法判定预览节点的容器归属关系-html教程-PHP中文网

node.contains() 的调用必须是容器节点调用，即 container.contains(previewel)，而非反向；它不跨文档或 shadow dom；ie8 需用 comparedocumentposition 回退并位与 16 判定；禁用字符串匹配替代。

怎么在 html 运行环境中通过 node.contains 方法判定预览节点的容器归属关系

Node.contains() 的调用主体必须是疑似容器节点

判断预览节点（比如一个动态插入的 previewEl）是否属于某个容器（如 editorContainer），关键不是“找 preview 是否在 DOM 里”，而是明确“谁是容器”。语法永远是：container.contains(previewEl)。如果写成 previewEl.contains(container)，结果一定是 false（除非 container 是 previewEl 的后代，这显然不符合逻辑）。

常见错误场景：

点击弹层外关闭时，误写 event.target.contains(previewEl) → 应改为 previewEl.parentElement?.contains(event.target) 或更稳妥的 editorContainer.contains(event.target)
拖拽结束校验目标区域，用 document.body.contains(previewEl) → 这只能说明它没被完全移除，不能证明它还在预期容器内；应改用 dropZone.contains(previewEl)
刚 appendChild() 后立刻 container.contains(previewEl) 却返回 false → 检查是否 append 到了 document fragment 或未挂载的父节点；确保 previewEl.parentNode === container 或至少已插入到 container 的子树中

注意 Node.contains() 不检测跨文档/Shadow DOM 的包含关系

Node.contains() 只对同属一个 Document 的节点有效。如果预览节点位于 iframe 内，或封装在 Shadow Root 中，即使视觉上“嵌套”在外部容器里，container.contains(previewEl) 也必然返回 false。

例如：

const iframeDoc = iframe.contentDocument;
const previewInIframe = iframeDoc.getElementById('preview');
console.log(container.contains(previewInIframe)); // false —— 即使 iframe 元素本身在 container 内

此时无法绕过限制：DOM 标准规定跨文档节点不构成“包含”语义。若需逻辑上关联，应通过消息通信、ID 映射或提前提取引用等方式处理，而不是依赖 contains()。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

IE8 兼容需回退 compareDocumentPosition，但别直接位运算硬编码

IE8 不支持 contains()，但 compareDocumentPosition() 在 IE9+、Chrome、Firefox、Safari 均可用。回退逻辑不是简单判断返回值是否等于 16，而应检查是否包含 16 这一位（即是否满足“当前节点包含目标节点”）：

推荐封装方式：

function isDescendant(parent, child) {
  if (parent.contains) return parent.contains(child);
  const rel = parent.compareDocumentPosition && parent.compareDocumentPosition(child);
  return !!(rel & 16); // 注意是位与，不是全等
}

错误写法示例：

rel === 16 → 忽略了可能同时存在其他位（如 4 表示“parent 在 child 前”），实际返回可能是 20（4 + 16）
未判空 parent.compareDocumentPosition 直接调用 → IE8 会报错
传入非 Node 类型（如字符串、null）→ contains() 静默返回 false，但 compareDocumentPosition() 会抛 TypeError，需前置校验