html实现contains节点包含判断_html contains检测节点是否包含子节点【快速上手】-html教程-PHP中文网

node.contains()是dom原生方法，用于判断祖先节点是否包含指定子节点（含自身及任意后代），须同属一个文档，返回布尔值；不适用于文本、class名或选择器字符串检测。

html实现contains节点包含判断_html contains检测节点是否包含子节点【快速上手】

用 `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()。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

常见误用：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) 看似直观，但极易出错。

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）