拷贝和遍历DOM树

一、浅拷贝：

拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制，

或者说，就是把一个对象的地址给了另外一个对象,他们的指向相同，两个对象之间有相同的属性或者方法，都可以使用

    <script>

   var obj1={

        age:24,

        sex:"男",

        name:"Eric"

    }

    var obj2={};

    //定义一个函数,把a对象中的所有属性复制到对象b中

    function extend(a,b){

        for(var key in a){

            b[key]=a[key];

        }

    }

    extend(obj1,obj2);

    console.log(obj2.name);//Eric

    console.log(obj2.sex);//男

    console.log(obj2.age);//24

    </script>

二、深拷贝：

拷贝还是复制,"深"是把一个对象中所有的属性或者方法,一个一个的复制,

并且在另外一个对象中开辟相应的空间,一个一个的存储到另外一个对象中

    <script>

    var obj1={

        age:25,

        sex:"男",

        car:["奥迪","特斯拉","五菱"],

        dog:{

            name:"小白",

            age:6,

            color:"黄色"

        }

    };

    var obj2={};

    //通过函数,把对象a中的所有数据拷贝到对象b中

    function extend(a,b){

        for(var key in a){

            //先获取a对象中每个属性的值

            var item=a[key];

            //判断这个值是不是数组

            if(item instanceof Array){

                //如果是数组,在对象b中添加一个新的属性,并且这个属性值也是数组

                b[key]=[];

                //调用这个方法,把a对象的这个数组的属性值一个一个的复制到b对象这个数组属性中

                extend(item,b[key]);

            }else if(item instanceof Object){//判断这个值是不是对象类型的

                //如果是对象类型的,那么在b对象中添加一个属性,也是对象

                b[key]={};

                //调用这个方法,把a对象中的属性对象的值.一个一个的复制到b对象的这个属性对象中

                extend(item,b[key]);

            }else{

                //如果是普通的数据,直接复制到b对象这个属性中

                b[key]=item;

            }

        }

    }

    extend(obj1,obj2);

    console.dir(obj2);//见下图

    </script>

三、遍历DOM树：

1、代码：

    <div>

        <!-- 遍历DOM树 -->

        <h1></h1>

        <p>

            <span></span>

            <span></span>

        </p>

    </div>

    <ul>

        <li>

            <a href="#"></a>

            <a href="#"></a>

            <a href="#"></a>

        </li>

        <li></li>

        <li></li>

    </ul>

    <script>

        //获取页面中的根节点---根标签

        var root=document.documentElement;//html

        //根据根节点,调用fn的函数,显示的是根节点的名字

        function forDOM(root1){

            //调用f1,显示的是节点的名字

            f1(root1);

            //获取根节点所有的子节点

            var children=root1.children;

            //调用遍历所有子节点的函数

            forChildren(children);

        }

        //给我子节点,把子节点的所有子节点显示出来

        function forChildren(children){

            //遍历所有的子节点

            for(var i=0;i<children.length;i++){

                //每个子节点

                var child=children[i];

                //显示每个子节点的名字

                f1(child);

                //判断child下面有没有子节点,如果有子节点,那么就继续遍历

                child.children&&forDOM(child);

            }

        }

        function f1(root){

            console.log("节点名字:======"+root.nodeName);

        }

        forDOM(root);

    </script>

2、思路

巴特西

拷贝和遍历DOM树

一、浅拷贝：

二、深拷贝：

三、遍历DOM树：

最新文章

热门文章