Question

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

例如，考虑以下标记 -

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

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

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

其中innerdiv位于outerdiv内。

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

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

innerelem.parentnode.parentnode.parentnode.parentnode

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

Answer 1

您可以创建如下函数：

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");

Answer 2

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

有两种选择：

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

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

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

Answer 3

<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>

Answer 4

参考https://stackoverflow.com/a/2631931/3940047并找到方法getPathTo（element）

你可以执行它来获取你所指的元素的xpath。如果你的元素在给定的div id中，你可以检查xpath。

Answer 5

您可以使用Node.contains https://developer.mozilla.org/en-US/docs/Web/API/Node.contains：

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

javascript [No Jquery]检查元素是否在div内

5 个答案: