contains()方法最直接——它是浏览器原生支持的DOM方法，专为判断“祖先-后代”关系设计，包括自身也算“包含”，返回布尔值，简洁又高效。
用 contains() 方法最直接——它是浏览器原生支持的 DOM 方法，专为判断“祖先-后代”关系设计，包括自身也算“包含”，返回布尔值，简洁又高效。
contains() 的标准用法
调用方式是：父节点.contains(子节点)，返回 true 或 false：
- 只要子节点在父节点的整个子树中（含直接子元素、深层嵌套元素，甚至就是父节点自己），就返回
true - 传入
null、文本节点、document对象等非元素节点，通常返回false；部分老浏览器可能报错 - 必须传入真实的 DOM 元素节点，不能传字符串选择器（比如
"#menu"）
典型使用场景
日常开发中几个高频用例：
- 点击弹窗外部关闭：
if (!popup.contains(e.target)) popup.classList.add('hidden'); - 校验表单控件是否仍在表单内：
form.contains(input)，防止被移出后仍触发提交 - 判断元素是否已挂载到页面：
document.body.contains(el)，比检查el.parentNode更可靠
需要注意的边界情况
看似简单，但容易踩坑：
立即学习“Java免费学习笔记（深入）”；
- 不等于“直接子元素”：它检测的是“祖先-后代”，不是父子直系。要判断是否为直接子节点，需额外检查
child.parentNode === parent - 跨 iframe 不互通：不同
document的节点不能混用。要在 iframe 内判断，得用iframe.contentDocument.body.contains(node) - Shadow DOM 默认不穿透：若目标节点在 shadow root 里，需调用
shadowRoot.contains(node)，而非宿主元素的contains()
兼容性与替代方案
现代浏览器（IE9+）都支持 contains()，无需 polyfill。如果需要兼容极老环境（如 IE8 及以下），可用 compareDocumentPosition() 回退：
-
parent.compareDocumentPosition(child) & 16表示 parent 包含 child - 更稳妥的做法是封装一个函数，优先用
contains()，降级走compareDocumentPosition()或向上遍历parentNode
