最直接可靠的方式是调用父节点的 contains() 方法，即 parent.contains(child)，返回 true 或 false；它原生支持、性能好、语义清晰，且从 ie9 起兼容，判断后代关系（含自身），但要求两节点同属一个 document、目标为有效元素节点、方向为“父查子”。
最直接可靠的方式是调用父节点的 contains() 方法，写成 parent.contains(child)，返回 true 或 false。它原生支持、性能好、语义清晰，且从 IE9 起就已兼容。
contains() 的正确用法
这个方法判断的是“后代关系”，包括直接子节点、深层嵌套节点，也包含自身：
-
div.contains(div)→true（自身算“包含”） -
ul.contains(li)→true（只要li在ul内任意层级） -
parent.contains(null)或传入非节点对象 →false
必须满足的前提条件
哪怕语法没错，结果也可能意外为 false，常见原因有：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 两个节点不属于同一个
document：比如 iframe 里的元素对主页面调用contains()一定失败 - 目标节点在 Shadow DOM 内部：默认不穿透，需额外处理（如用
event.composedPath()或遍历 shadowRoot） - 传入了字符串、选择器或文本节点：
contains()只接受有效 DOM 元素节点（nodeType === 1） - 方向反了：只能是“父查子”，不能写
child.contains(parent)
实用判断场景示例
这些是日常高频用法，可直接套用：
- 点击弹窗外部时关闭：
!modal.contains(e.target) && modal.classList.remove('show') - 检查元素是否已挂载：
document.body.contains(el) - 验证表单控件归属：
form.contains(input)防止 input 被移出后仍提交 - 判断点击是否发生在侧边栏内：
sidebar.contains(e.target)
不推荐的替代方式
除非特殊限制（如极老浏览器），没必要用以下方法：
- 手动向上遍历
parentNode：代码长、易漏边界、性能差 - 用
compareDocumentPosition()判断位掩码：可读性差，现代环境无必要 - 用
querySelector()模拟：parent.querySelector(selector) !== null—— 这是查找，不是判断包含关系，且无法覆盖动态插入或非元素节点
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
