Node.contains()是DOM原生方法，用于判断祖先节点是否包含指定子节点（含自身及任意后代），须同属一个文档，返回布尔值；不适用于文本、class名或选择器字符串检测。
用 Node.contains() 判断父节点是否包含某子节点
直接调用父节点的 contains() 方法，传入目标节点引用即可——这是最可靠、语义最清晰的方式。它返回布尔值，且支持跨 Shadow DOM（现代浏览器中），比字符串匹配或遍历更安全。
-
parent.contains(child)返回true仅当child是parent的**后代节点**（包括直接子节点、孙子节点等），不关心是否在当前文档树中（比如child已被移除但尚未被 GC，仍可能返回true） - 若传入
null或非 Node 类型（如字符串、undefined），会静默转为false，不会报错 - 注意：不能用
document.contains(element)来判断元素是否“已挂载”，因为即使元素已从 DOM 移除，只要没被回收，document.contains()仍可能返回true；应结合element.isConnected判断实时连接状态
Element.contains() 和 Node.contains() 有区别吗？
没有实质区别。Element 继承自 Node，Element.contains() 就是 Node.contains() 的继承实现。你可以对任意节点（Element、Document、DocumentFragment）安全调用 contains()。
- 常见误用：
div.contains('#my-id')—— 错！contains()只接受节点对象，不接受选择器字符串。要先document.querySelector('#my-id')拿到节点再传入 -
document.body.contains(someDiv)是合法的；someDiv.contains(someDiv)也返回true（节点包含自身） - IE9+ 支持，无需 polyfill；但 IE8 及更早版本不支持，需回退到
compareDocumentPosition或祖先遍历逻辑
别用 innerHTML.includes() 或 textContent.includes() 做“包含节点”判断
这是典型误用：它们检测的是字符串是否包含某段文本，完全无法反映 DOM 结构关系。比如 parent.innerHTML.includes(child.outerHTML) 看似直观，但极易出错。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- HTML 字符串顺序、空格、属性顺序、序列化差异（如自闭合标签处理）都会导致匹配失败
- 如果
child有动态绑定的事件或数据属性（如 Vue/React 的私有属性），序列化后丢失，比对必然失效 - 性能差：每次调用都触发完整 HTML 序列化，对大节点开销明显
- 根本不是同一维度的判断——你问的是“结构上是否嵌套”，不是“渲染后文本里有没有那段 HTML 字符”
遇到 Shadow DOM 时要注意 shadowRoot.contains()
若目标子节点位于某个元素的 shadow tree 内，而你用宿主元素（host）调用 contains()，默认返回 false。必须显式访问 shadow root 并在其上调用。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
host.shadowRoot?.contains(child)（注意可选链，避免shadowRoot为null） -
host.contains(child)在启用了mode: 'open'的 shadow root 下仍返回false；只有closed模式才彻底隔离，但此时连shadowRoot都不可访问 - 若需跨影子边界统一判断，需递归检查
host及其所有shadowRoot（如有多个 slot 或 nested shadow）
contains() 不保证节点当前在活动文档流中，isConnected 才是那个关键开关。 
