contains是dom原生方法，用于判断节点是否为另一节点的后代（含自身），返回布尔值；仅支持节点对象，不支持字符串选择器；性能优于遍历parentnode或queryselector等方案。
contains 方法是 DOM API 提供的原生方法，用于快速判断一个节点是否为另一个节点的后代（包括直接子节点、深层嵌套子节点，也包括自身）。
contains 的基本用法
调用方式很简单：父节点调用 contains(childNode)，返回布尔值。
- 如果
childNode是该父节点的后代（含自身），返回true - 如果
childNode为null或不在该父节点的子树中，返回false - 注意：它只支持节点对象，不能传入选择器字符串或数字等其他类型
常见使用场景和写法
比如判断点击的目标元素是否在某个弹窗容器内，避免误触关闭：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
document.addEventListener('click', e => {
if (!popup.contains(e.target)) {
popup.classList.add('hidden');
}
});
再比如校验某个元素是否属于某个区域：
-
sidebar.contains(clickedEl)→ 判断点击元素是否在侧边栏内部 -
form.contains(input)→ 判断 input 是否属于当前表单（防止被移出后仍提交） - 注意：
document.body.contains(el)可用来判断元素是否已挂载到页面中
容易忽略的关键细节
contains 不检测“父-子”直接关系，而是“祖先-后代”关系，且包含自身：
-
div.contains(div) === true（自身也算“包含”） - 如果要严格判断是否为直接子节点，需配合
parentNode === parent - 跨 iframe 时，不同 document 的节点互不可见，
iframe.contentDocument.body.contains(node)才有效，不能混用不同 document 的节点 - Shadow DOM 中默认不穿透，若节点在 shadow root 内，需先调用
shadowRoot.contains()
对比其他判断方式
相比遍历 parentNode 或使用 querySelector，contains 性能更高、语义更清晰：
- 不用手动循环向上找父级，浏览器底层优化实现
- 比
el.closest('.parent-class')更直接——后者还要匹配选择器，且返回的是匹配的祖先元素而非布尔值 - 比
Array.from(parent.children).includes(child)更准确——后者只查直接子元素，且不处理文本节点、注释节点等
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
