首页 > 代码库 > 操作DOM树

操作DOM树

操作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 id="li24">杨玉环</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、执行删除(通过父节点删除)
               */
//获取li标签
var li24 = document.getElementById("li24");
//获取父节点
//两种方式 1、通过id获取 ; 2、通过属性 parentNode获取
var ul31 = document.getElementById("ulid31");
//删除(通过父节点)
ul31.removeChild(li24);

** replaceChild(newNode,oldNode)方法: 替换节点
- 不能自己替换自己,通过父节点替换
- 两个参数
** 第一个参数:新的节点(替换成的节点)
** 第二个参数:旧的节点(被替换的节点)
- 代码
/*
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);

** cloneNode(boolean): 复制节点
- //把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);

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

操作DOM树