操作ＤＯＭ树

操作dom树
　　　　** appendChild方法
　　　　　　　- 添加子节点到末尾
　　　　　　　- 特点：类似于剪切黏贴的效果

<body>
    <div id="div1">
        <ul id="ulid11">
            <li>tom</li>
            <li>mary</li>
            <li>jack</li>
        </ul>
    </div>

    <div id="div2">

    </div>

    <input type="button" value="add1" onclick="add11();"/>
    <script type="text/javascript">
        function add11() {
            //得到div2
            var div2 = document.getElementById("div2");
            //获取ul
            var ul11 = document.getElementById("ulid11");
            //把ul添加到div2里面
            div2.appendChild(ul11);
        }
        
    </script>

 </body>

　　　　** insertBefore(newNode,oldNode)方法
　　　　　　　- 在某个节点之前插入一个新的节点
　　　　　　　- 两个参数
　　　　　　　　　　　* 要插入的节点
　　　　　　　　　　　* 在谁之前插入
　　　　　　　- 插入一个节点，节点不存在，创建
　　　　　　　　　　　1、创建标签
　　　　　　　　　　　2、创建文本
　　　　　　　　　　　3、把文本添加到标签下面
　　　　　　　　　　　　　　　- 代码
　　　　　　　　　　　　　　　　/*
　　　　　　　　　　　　　　　　　1、获取到li13标签
　　　　　　　　　　　　　　　　　2、创建li
　　　　　　　　　　　　　　　　　3、创建文本
　　　　　　　　　　　　　　　　　4、把文本添加到li下面
　　　　　　　　　　　　　　　　　5、获取到ul
　　　　　　　　　　　　　　　　　6、把li添加到ul下面（在<li>貂蝉</li>之前添加 <li>董小宛</li>）
　　　　　　　　　　　　　　　　*/
　　　　　　　　　　　　　　　　//获取li3 标签
　　　　　　　　　　　　　　　　　var li13 = document.getElementById("li13");
　　　　　　　　　　　　　　　　//创建li
　　　　　　　　　　　　　　　　　var li15 = document.createElement("li");
　　　　　　　　　　　　　　　　//创建文本
　　　　　　　　　　　　　　　　　var text15 = document.createTextNode("董小宛");
　　　　　　　　　　　　　　　　//把文本添加到li下面 appendChild
　　　　　　　　　　　　　　　　　li15.appendChild(text15);
　　　　　　　　　　　　　　　　//获取到ul
　　　　　　　　　　　　　　　　　var ul21 = document.getElementById("ulid21");
　　　　　　　　　　　　　　　　//在<li>貂蝉</li>之前添加 <li>董小宛</li>
　　　　　　　　　　　　　　　　//insertBefore(newNode,oldNode)
　　　　　　　　　　　　　　　　　ul21.insertBefore(li15,li13);

　　　　*** 不存在没有insertAfter()方法

 <body>
    <ul id="ulid21">
        <li id="li11">西施</li>
        <li id="li12">王昭君</li>
        <li id="li13">貂蝉</li>
        <li id="li14">杨玉环</li>
    </ul>

    <input type="button" value="remove" onclick="insert1();"/>
    <script type="text/javascript">
        //删除<li >杨玉环</li>
        function insert1() {        
            /*
                1、获取到li24标签
                2、获取父节点ul标签
                3、执行删除（通过父节点删除）
            */
            　//获取li3 标签
　　　　　　　　　　　　　　　　　var li13 = document.getElementById("li13");
　　　　　　　　　　　　　　　　//创建li
　　　　　　　　　　　　　　　　　var li15 = document.createElement("li");
　　　　　　　　　　　　　　　　//创建文本
　　　　　　　　　　　　　　　　　var text15 = document.createTextNode("董小宛");
　　　　　　　　　　　　　　　　//把文本添加到li下面 appendChild
　　　　　　　　　　　　　　　　　li15.appendChild(text15);
　　　　　　　　　　　　　　　　//获取到ul
　　　　　　　　　　　　　　　　　var ul21 = document.getElementById("ulid21");
　　　　　　　　　　　　　　　　//在<li>貂蝉</li>之前添加 <li>董小宛</li> 
　　　　　　　　　　　　　　　　//insertBefore(newNode,oldNode)
　　　　　　　　　　　　　　　　　ul21.insertBefore(li15,li13);
        }
        
    </script>

 </body>

　　　　　** removeChild方法：删除节点
　　　　　　　　　　- 通过父节点删除，不能自己删除自己
　　　　　　　　　　　　　　- /*
　　　　　　　　　　　　　　　　1、获取到li24标签
　　　　　　　　　　　　　　　　2、获取父节点ul标签
　　　　　　　　　　　　　　　　3、执行删除（通过父节点删除）
　　　　　　　　　　　　　　*/

<body>
    <ul id="ulid31">
        <li id="li21">西施</li>
        <li id="li22">王昭君</li>
        <li id="li23">貂蝉</li>
        <li id="li24">杨玉环</li>
    </ul>

    <input type="button" value="remove" onclick="remove1();"/>
    <script type="text/javascript">
        //删除<li >杨玉环</li>
        function remove1() {        
            /*
                1、获取到li24标签
                2、获取父节点ul标签
                3、执行删除（通过父节点删除）
            */
            //获取li标签
            var li24 = document.getElementById("li24");
            //获取父节点
            //两种方式  1、通过id获取 ； 2、通过属性 parentNode获取
            var ul31 = document.getElementById("ulid31");
            //删除（通过父节点）
            ul31.removeChild(li24);
        }
        
    </script>

 </body>

** replaceChild(newNode,oldNode)方法: 替换节点
- 不能自己替换自己，通过父节点替换
- 两个参数
** 第一个参数：新的节点（替换成的节点）
** 第二个参数：旧的节点（被替换的节点）

 <body>
    <ul id="ulid41">
        <li id="li31">紫衫龙王</li>
        <li id="li32">白眉鹰王</li>
        <li id="li33">金毛狮王</li>
        <li id="li34">青翼蝠王</li>
    </ul>

    <input type="button" value="replace" onclick="replace1();"/>
    <script type="text/javascript">
        //<li >青翼蝠王</li>替换  <li>张无忌</li>
        function replace1() {
            /*
                1、获取到li34
                2、创建标签li
                3、创建文本
                4、把文本添加到li下面
                5、获取ul标签（父节点）
                6、执行替换操作 （replaceChild(newNode,oldNode)）
            */
            //获取li34
            var li34 = document.getElementById("li34");
            //创建li
            var li35 = document.createElement("li");
            //创建文本
            var text35 = document.createTextNode("张无忌");
            //把文本添加到li下面
            li35.appendChild(text35);
            //获取ul
            var ul41 = document.getElementById("ulid41");
            //替换节点
            ul41.replaceChild(li35,li34);
        }
    </script>

 </body>

** cloneNode(boolean): 复制节点

 <body>
    <ul id="ulid41">
        <li id="li31">紫衫龙王</li>
        <li id="li32">白眉鹰王</li>
        <li id="li33">金毛狮王</li>
        <li id="li34">青翼蝠王</li>
    </ul>
    <div id="divv">  
    </div>
    <input type="button" value="copy" onclick="copy1();"/>
    <script type="text/javascript">
        function copy1() {
            //把ul列表复制到另外一个div里面
            /*
                1、获取到ul
                2、执行复制方法 cloneNode方法复制 true
                3、把复制之后的内容放到div里面去
                    ** 获取到div
                    ** appendChild方法
            */
            //获取ul
            var ul41 = document.getElementById("ulid41");
            //复制ul，放到类似剪切板里面
            var ulcopy = ul41.cloneNode(true)
            //获取到div
            var divv = document.getElementById("divv");
            //把副本放到div里面去
            divv.appendChild(ulcopy);
        }
    </script>
 </body>

** 操作dom总结
* 获取节点使用方法
getElementById()：通过节点的id属性，查找对应节点。
getElementsByName()：通过节点的name属性，查找对应节点。
getElementsByTagName()：通过节点名称，查找对应节点
* 插入节点的方法
insertBefore方法：在某个节点之前插入
appendChild方法：在末尾添加，剪切黏贴
* 删除节点方法
removeChild方法：通过父节点删除
* 替换节点方法
replaceChild方法：通过父节点替换

操作ＤＯＭ树

相关推荐