javascript [No Jquery]检查元素是否在div内[重复]答案

【问题标题】：javascript [No Jquery] Check if an element is inside a div or not [duplicate]javascript [No Jquery]检查元素是否在div内[重复]
【发布时间】：2015-06-24 06:32:54
【问题描述】：

我想检查该元素是否不直接在 div 内。

例如考虑以下标记-

如果我将 div 放在另一个 div 中。

然后我可以使用这个代码-

if(document.getElementById('innerDiv').parentElement.id == 'outerDiv') )

innerdiv 在outerdiv 内的位置。

但是如果我将四个 div's 放在一个里面怎么办，那么我如何检查任何 div 是否在给定的 div 内。

可能有比使用此代码更好的选择

innerelem.parentnode.parentnode.parentnode.parentnode

我希望我能够解释我想做什么？？？？

【问题讨论】：

也许获取容器 div 的内部 html，并用正则表达式测试它是否出现 id='innerDiv'?
如果你使用你提到的 1 选项，不管有多少divs，它都会起作用。

标签： javascript html

【解决方案1】：

你可以使用Node.containshttps://developer.mozilla.org/en-US/docs/Web/API/Node.contains:

if(document.getElementById('outerDiv').contains(document.getElementById('innerDiv')))

【讨论】：

【解决方案2】：

可能有比使用此代码更好的选择

几个选项：

如果你真的有ids（或任何其他你可以用来唯一标识外部元素中的内部元素），那么你可以使用querySelector：
```
if (document.getElementById("outerDiv").querySelector("#innerDiv")) {
    // Yes, it's inside it
} else {
    // No, it isn't
}
```
querySelector 如果没有找到该元素，则返回null，并且当您在一个元素上使用它时，它只会在该元素的后代内部查找（而不是通过整个文档）。所有现代浏览器都支持querySelector，也支持IE8。

如果您需要更大的灵活性，循环会比.parentNode.parentNode... 更脆弱：

var node, inside;
inside = false;
for (node = innerelem; node; node = node.parentNode) {
    if (node.id === 'outerDiv') {
        inside = true;
        break;
    }
}

【讨论】：

【解决方案3】：

你可以像这样创建一个函数：

function findUpId(innerId, outerId) {
    var el = document.getElementById(innerId);
    while (el.parentNode) {
        el = el.parentNode;
        if (el.id === outerId)
            return true;
    }
    return false;
}

然后您可以调用：

var inside = findUpId("innerDiv","outerDiv");

【讨论】：

【解决方案4】：

<html>
<body>
<div id="oInput">
    <input id="1" type="text">
    <input id="2" type="text">
    <input id="3" type="text">
    <input id="4" type="text">
    <input id="5" type="text">
</div>
<script type="text/javascript">
    var oInput = document.getElementById('oInput'), oChild;
    for(i = 0; i < oInput.childNodes.length; i++){
        oChild = oInput.childNodes[i];
        if(oChild.id== 'your id'){
            alert('it is child');
        }
    }
</script>
</body>
</html>

【讨论】：

【解决方案5】：

参考https://stackoverflow.com/a/2631931/3940047，找到getPathTo(element)方法

您可以执行它来获取您所指元素的 xpath。如果您的元素在给定的 div id 内，您可以签入 xpath。

【讨论】：