dom操作的实例 #5

nianxiongdi · 2019-08-04T14:44:03Z

遍历元素节点树

方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <span></span>
        <div></div>
        <p>
            <div></div>
        </p>
        <input />
    </div>
    <script>
        /**
         * 遍历所有的节点树
         */
        
        const dom = document.getElementsByTagName('div')[0];
  
        Element.prototype.allElementNode = function() {
            let childs = this.childNodes;
            for(let i=0; i<childs.length; i++) {
                if(childs[i].nodeType == 1){
                    console.log(childs[i].nodeName)
                } 
            }
        }

        dom.allElementNode();
    
    </script>
</body>
</html>

方法2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <span></span>
        <div></div>
        <div>  
            <p></p>
        </div>
        <input />
    </div>
    <script>
        /**
         * 遍历所有的节点树
         */
        
        const dom = document.getElementsByTagName('div')[0];
        let arr = [];
        Element.prototype.allElementNode = function() {
            let childs = this.children;
            for(let i=0; i<childs.length; i++) {
                arr.push(childs[i].nodeName);
                if( childs[i].hasChildNodes() ) {
                    console.log(123);
                    childs[i].allElementNode();
                } 
            }
            return arr;
        }

        console.log( dom.allElementNode() );
    
    </script>
</body>
</html>

遍历dom树所有节点，以对象结构保存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <span></span>
        <div></div>
        <div>  
            <p></p>
        </div>
        <input />
    </div>
    <script>
        /**
         * 遍历所有的节点树 - 标签以对象形式保存
         *
         *  {"DIV":["SPAN","DIV",{"DIV":["P"]},"INPUT"]}
         * */
        
        const dom = document.getElementsByTagName('div')[0];
        let obj = { }
        Element.prototype.allElementNode = function(obj) {
            let childs = this.children;
            obj[this.nodeName] = []
            for(let i=0; i<childs.length; i++) {
                if( childs[i].hasChildNodes() ) {
                    let name = childs[i].nodeName;
                    obj[this.nodeName].push({});
                    obj[this.nodeName][obj[this.nodeName].length-1][name] = []
                    childs[i].allElementNode(obj[this.nodeName][obj[this.nodeName].length-1]);
                }else {
                    obj[this.nodeName].push(childs[i].nodeName);
                }
            }
            return obj;
        }

        console.log( JSON.stringify(dom.allElementNode(obj)) );
        // {"DIV":["SPAN","DIV",{"DIV":["P"]},"INPUT"]}
    
    </script>
</body>
</html>

元素e的第n层祖先元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <main>
        <div>  
            <p></p>
        </div>
        <input />
    </main>
    <script>
        /**
         * 返回元素e的第n层祖先元素节点
         */
        
        const dom = document.getElementsByTagName('p')[0];
        function someParent(elem, n) {
            
            while(elem && n) {
                elem = elem.parentElement;
                n--;
            }
            return elem;

        }
        // 返回的main的dom结构
        console.log(someParent(dom, 2));
         
    
    </script>
</body>
</html>

元素e的第n个兄弟元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <main>
        <span></span>
        <div>  
            <p></p>
        </div>
        <span class="span"></span>
        <div class="footer"></div>
    </main>
    <script>
        /**
         * 返回元素e的第n个兄弟元素节点,
         *  n为正,返回后面的兄弟节点,
         *  n为负,返回前面的兄弟节点
         *  n为0,返回自己
         */
        
         
        function someSibling(elem, n) {
            
            while(elem && n) {
    
                if(n > 0) {
                    if(elem.nextElementSibling) { // ie9以下不兼容
                        elem = elem.nextElementSibling;
                    }else {
                        for(elem = e.nextSibling; e.nodeType!=1; e=e.nextSibling){};
                    }
                    n--;
                }else {
                
                    if(elem.previousElementSibling) { // ie9以下不兼容
                        elem = elem.previousElementSibling;
                    }else {
                        for(elem = e.previousSibling; e.nodeType!=1; e=e.previousSibling){};
                    }
                    n++;
                }

            }
            return elem;


        }
        const dom = document.getElementsByTagName('div')[0];
        console.log( someSibling(dom, -1) );
     
    </script>
</body>
</html>

找出直接孩子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <main>
        <span></span>
        <div>  
            <p></p>
        </div>
        <span class="span"></span>
        <div class="footer"></div>
    </main>
    <script>
        /**
         * 找出直接孩子节点,解决部分浏览器的兼容问题
         */
        
        var arr = [];
        Element.prototype.myChildren = function() {
            let child = this.childNodes;
            let len = child.length;
            for(let i=0; i<len; i++) {
                if(child[i].nodeType == 1) {
                    arr.push(child[i]);
                }
            }
            return arr;
        }
        const dom = document.getElementsByTagName('main')[0];
        console.log( dom.myChildren(dom) );
     
    </script>
</body>
</html>

是否有孩子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <main>
        <span></span>
        <div>  
            <p></p>
        </div>
        <span class="span"></span>
        <div class="footer"></div>
    </main>
    <script>
        /**
         * 封装自己的hasChilden方法,不可用children属性  (是否有孩子节点)
         */
        
        Element.prototype.hasChilden = function() {
            let child = this.childNodes;
            let len = child.length;
            for(let i=0; i<len; i++) {
                if(child[i].nodeType == 1) {
                    return true;
                }
            }
            return false;
        }
        const dom = document.getElementsByTagName('main')[0];
        console.log( dom.hasChilden(dom) ); // true
     
    </script>
</body>
</html>

实现insertAfter方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <span></span>
        <div>  
            <p></p>
        </div>
        <span class="span"></span>
        <div class="footer"></div>
    </div>
    <script>
        /**
         * 自己封装insertAfter方法 - 插入到当前元素的后面
            参数1: 插入节点
            参数2: 当前节点
         */
        
        Element.prototype.insertAfter = function(target, current) {
            const beforeNode = current.nextElementSibiling;
            if(beforeNode == null) 
                this.appendChild(target);
            else
                this.insertBefore(target, beforeNode);
        }
        const parent = document.getElementsByTagName('div')[0];
        const current = document.getElementsByClassName('footer')[0];
        const target = document.createElement('div');
        parent.insertAfter(target, current);
        console.log(parent);
    </script>
</body>
</html>

节点的逆序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <span>1</span>
        <div>  
            <p>2</p>
        </div>
        <span class="span">3</span>
        <div class="footer">4</div>
    </div>
    <script>
        /**
         * 节点的逆序
         */
        Element.prototype.reverseElement = function() {
            let childs = this.children;
            let len = childs.length;
            for(let i=len-2; i>=0; i--) {
                this.appendChild(childs[i]);
                console.log(childs);
            }
        }
        const dom = document.getElementsByTagName('div')[0];
        dom.reverseElement();

        console.log(dom);
        
    </script>
</body>
</html>

遍历所有节点

 nodes = [];
    function do1(root) {
        // console.log(root.childNodes.length);
        for (let i = 0;i < root.childNodes.length;i++) {
            var node = root.childNodes[i];
            // 过滤 text 节点、script 节点
            // console.log(node.nodeType,node.nodeName);
            if ((node.nodeType != 3) && (node.nodeName != 'SCRIPT')) {
                // console.log(node)               
                if(node.id && node.id=='name'){
                    return node;
                }
                nodes.push(node);
                do1(node);
            }
        }
        return nodes;
    }
    console.log(  do1(document.body));

dom树的最大高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="main">
        <div><div></div> </div>
        <div></div>
        
    </div>
    <script>
        const getDepth = node => {
            if (!node.children || node.children.length === 0) {
                return 1;
        }
        const maxChildrenDepth = [...node.children].map(v => getDepth(v));
            return 1 + Math.max(...maxChildrenDepth)
        };
        // const body = document.querySelector('body')
        console.log(getDepth(document.getElementsByTagName('html')[0]))
    </script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

nianxiongdi added the learing Learning articles label Aug 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dom操作的实例 #5

dom操作的实例 #5

nianxiongdi commented Aug 4, 2019 •

edited

Loading

dom操作的实例 #5

dom操作的实例 #5

Comments

nianxiongdi commented Aug 4, 2019 • edited Loading

遍历元素节点树

遍历dom树所有节点，以对象结构保存

元素e的第n层祖先元素节点

元素e的第n个兄弟元素节点

找出直接孩子节点

是否有孩子节点

实现insertAfter方法

节点的逆序

遍历所有节点

dom树的最大高度

nianxiongdi commented Aug 4, 2019 •

edited

Loading