当前位置：网站首页>JS find all nodes sibling childNodes children

JS find all nodes sibling childNodes children

2022-07-27 19:51:00 【HandsomeDanielWu】

siblings Brothers and sisters

 

 

 

 childNodes Unique child nodes

  Place the space <div/> Text node <p><p/><div>

 children

 

 

 

  Find all nodes

 

 

 

 

 

 

  encapsulation , Return all element sibling nodes 

<body>
    <div class="box">
        <p> I'm a paragraph </p>
        <p> I'm a paragraph </p>
        <p> I'm a paragraph </p>
        <p id="fpara"> I'm a paragraph </p>
         I am the text 
        <!--  I am a comment  -->
        <p id="para">
             I'm a paragraph para
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </p>
        <p> I'm a paragraph </p>
        <p> I'm a paragraph </p>
        <p> I'm a paragraph </p>
    </div>
    <script>
        var box = document.getElementById("box");
        var para = document.getElementById("para");
        var fpara = document.getElementById("fpara");
        //  encapsulation , Return all element sibling nodes 
        function getAllElementSiblings(node){
            // Brother node in front 
            var prevs = [];
            //  Brother nodes behind 
            var nexts = [];

            var o = node;
            //  facilitate Node The front node 
            while(o.previousSibling != null){
                if(o.previousSibling.nodeType == 1){
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling ;
            }

            o = node;
            //  facilitate Node Back node 
            while(o.nextSibling != null){
                if(o.nextSibling.nodeType == 1){
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }

            //prevs Array merge nexts Array 
            return prevs.concat(nexts);
        }

        console.log(getAllElementSiblings(para));
    </script>
</body>

原网站

版权声明
本文为[HandsomeDanielWu]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271703167571.html

边栏推荐

猜你喜欢

随机推荐