js有个contains的方法来判断是否为子节点我想问下这个是怎么实现的呢？原理是什么呢？

怎么判断某个dom节点是否包含某个dom节点?

发布于
2017-05-17

contains 自带方法，判断一个元是不是另一个元的子集

document.documentElement.contains(document.body) 
//true 意思是html是否包含body

残阳映枫红

6.1k11115

发布于
2016-10-13

<div class="first">
    <div class="first-child"></div>
</div>
<div class="second">
    <div class="second-child">
        <div class="second-child-child"></div>
    </div>
</div>
<script type="text/javascript">
    var a = document.querySelector('.first-child');
    var b = document.querySelector('.second-child-child');
    var c = document.querySelector('.first');
    var d = document.querySelector('.second');

    function isChildOf(child, parent) {
        var parentNode;
        if(child && parent) {
            parentNode = child.parentNode;
            while(parentNode) {
                if(parent === parentNode) {
                    return true;
                }
                parentNode = parentNode.parentNode;
            }
        }
        return false;
    }

    console.log(isChildOf(a, b));
    console.log(isChildOf(b, d));
    console.log(isChildOf(a, c));
</script>

crp205

3.9k3821

发布于
2016-10-13

<div class="child"></div>

</div>
console.log(document.querySelector(".parent").querySelector(".child"))
child存在时有值,不存在值是null,判断这个就行了

码中仙

10314

发布于
2018-08-02

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .center {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .main {
                width: 300px;
                height: 300px;
                background: red;
            }
            
            .con {
                width: 200px;
                height: 200px;
                background: green;
            }
            
            .text {
                width: 100px;
                height: 100px;
                background: yellow;
            }
        </style>

    </head>

    <body>
        <div class="main center">
            <div class="con center">
                <span class="text center">测试</span>
            </div>
        </div>
        <script type="text/javascript">
            var main = document.querySelector(".main");
            var con = document.querySelector(".con");
            var text = document.querySelector(".text");

            text.addEventListener("click", function(e) {
                console.log(main.contains(e.target));
                console.log(con.contains(e.target));
                console.log(main.contains(con));

                console.log(con.contains(main));
            })
          
            console.log(isChildOf(con, main));
            console.log(isChildOf(text, main));
            console.log(isChildOf(main, con));

            function isChildOf(child, parent) {
                var parentNode;
                if(child && parent) {
                    parentNode = child.parentNode;
                    while(parentNode) {
                        if(parent === parentNode) {
                            return true;
                        }
                        parentNode = parentNode.parentNode;
                    }
                }
                return false;
            }
        </script>
    </body>

</html>

superen

10412

发布于
2021-05-10

https://developer.mozilla.org...
官方文档

function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}

和一楼一样

怎么判断某个dom节点是否包含某个dom节点?

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？