判断DOM元素是否包含在另一个元素中的方法

在网页开发过程中，我们常常会遇到需要判断一个DOM元素是否包含在另一个元素中的情况。这一操作在很多场景下都至关重要，比如实现特定的交互效果、进行精准的样式调整等。下面就为大家介绍几种常用的判断方法。

使用contains() 方法

在JavaScript中，contains() 方法是判断一个元素是否包含另一个元素的便捷方式。该方法是DOM Level 3 新增的，语法如下：parentElement.contains(childElement)。这里，parentElement 是父元素，childElement 是可能被包含的子元素。如果 childElement 是 parentElement 的后代元素（直接或间接），该方法将返回 true；否则返回 false。例如：

const parent = document.getElementById('parent');
const child = document.getElementById('child');
if (parent.contains(child)) {
    console.log('子元素包含在父元素中');
} else {
    console.log('子元素不在父元素中');
}

需要注意的是，IE9 及以下版本不支持 contains() 方法，不过可以通过 compareDocumentPosition() 方法来模拟实现。

遍历查找法

如果不想使用 contains() 方法，或者需要兼容更低版本的浏览器，遍历查找是一种可行的方案。从子元素开始，不断获取其 parentNode，直到找到 null 或者找到目标父元素。示例代码如下：

function isChildInParent(child, parent) {
    let current = child;
    while (current) {
        if (current === parent) {
            return true;
        }
        current = current.parentNode;
    }
    return false;
}
const parentEl = document.getElementById('parent');
const childEl = document.getElementById('child');
if (isChildInParent(childEl, parentEl)) {
    console.log('子元素包含在父元素中');
} else {
    console.log('子元素不在父元素中');
}

这种方法虽然兼容性好，但相对复杂，性能也稍差，尤其是在DOM结构较深时。

判断DOM元素是否包含在另一个元素中有多种方法，开发者可以根据项目的具体需求，包括兼容性要求、性能需求等，来选择合适的方式，以实现高效且稳定的功能。