如何监测子标签是否在父标签内

使用parentNode属性和循环

类似于instanceof的实现思路:可以先获取子标签，然后通过不断获取其父节点并与目标父节点进行比较，从而实现隔代查找判断。例如：

var child = document.getElementById('child');
var targetParent = document.getElementById('targetParent');
while (child.parentNode) {
    if (child.parentNode === targetParent) {
        console.log('子标签在目标父标签内');
        break;
    }
    child = child.parentNode;
}

使用contains方法和递归

可以在一个递归函数中使用contains方法，从子标签开始向上遍历，判断是否存在目标父标签。例如：

function checkIfInParent(child, targetParent) {
    if (child.parentNode === targetParent) {
        return true;
    }
    if (child.parentNode) {
        return checkIfInParent(child.parentNode, targetParent);
    }
    return false;
}

var child = document.getElementById('child');
var targetParent = document.getElementById('targetParent');
if (checkIfInParent(child, targetParent)) {
    console.log('子标签在目标父标签内');
}

使用querySelector方法

如果知道从根元素到目标父元素以及从目标父元素到子元素的完整CSS选择器路径，就可以使用querySelector方法进行隔代查找判断。例如：

var root = document.documentElement;
var targetParentSelector = '#targetParent';
var childSelector = '#child';
var fullSelector = targetParentSelector + ' ' + childSelector;
if (root.querySelector(fullSelector)) {
    console.log('子标签在目标父标签内');
}