Javascript_9_DOM_节点练习

黄舟原创: 2017-01-18 16:36:04 995浏览

Javascript_9_DOM_节点练习

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>DOM_节点练习</title>
    <style type="text/css">
      div{
        border:#008FF0 solid 2px;
        width:100px;
        height:50px;
        padding:5px;
        margin:10px;
      }
      #div_1{background-color:blue;}
      #div_2{background-color:red;}
      #div_3{background-color:green;}
      #div_4{background-color:orange;}
    </style>
    </head>
    <body>
    <h1>DOM_节点练习</h1>
    <script type="text/javascript" src="a.js">    </script>
    <input type="button" value="创建并添加文本节点1" onclick="DOM_demo_1()"/>
    <input type="button" value="创建并添加按钮节点1" onclick="DOM_demo_2()"/>
    <input type="button" value="innerHTML方式添加节点1" onclick="DOM_demo_3()"/>
    <input type="button" value="删除节点1" onclick="DOM_demo_4()"/>
    <input type="button" value="删除节点2" onclick="DOM_demo_5()"/>
    <input type="button" value="替换节点1" onclick="DOM_demo_6()"/>
    <input type="button" value="替换节点2" onclick="DOM_demo_7()"/>
    <input type="button" value="克隆替换节点" onclick="DOM_demo_8()"/>
    
    <script type="text/javascript">
      /*
       * firstNode=childNodes[0];
       * lastNode=childNodes[childNodes.length-1];
       */
      function DOM_demo_8(){
        /*
         * 需求：用DIV3替换DIV1：
         * DIV中的方法3：用克隆的副本替换节点
         * cloneNode(boolean) 从文档层次中复制对对象的引用。
         * boolean:代表是否克隆子节点，默认是否false 
         * 具体过程是：先将DIV3复制后，再用副本替换DIV1的位置
         */
        var oDiv_3=document.getElementById("div_3");
//       var oCopyDiv_3=oDiv_3.cloneNode(false);//默认是false,不克隆子节点
        var oCopyDiv_3=oDiv_3.cloneNode(true);//
        var oDiv_1=document.getElementById("div_1");
        oDiv_1.parentNode.replaceChild(oCopyDiv_3,oDiv_1);
      }
      function DOM_demo_7(){
        /*
         * 需求：用DIV3替换DIV1：
         * DIV中的方法2：（建议使用）
         * replaceChild 用新的子元素替换已有的子元素。 
         * 父Node.replaceNode(new子,old子);注意顺序
         * 返回old子
         * 同样是：直接将DIV3剪切后，替换到了DIV1的位置上
         */
        var oDiv_1=document.getElementById("div_1");
        var oDiv_3=document.getElementById("div_3");
        oDiv_1.parentNode.replaceChild(oDiv_3,oDiv_1);
      }
      function DOM_demo_6(){
        /*
         * 需求：用DIV3替换DIV1：
         * DIV中的方法1：（不建议使用）
         * replaceNode 用其它元素替换对象。 
         * old.replaceNode(new);
         * oDiv_1.replaceNode(oDiv_3);
         * 直接将DIV3剪切后，替换到了DIV1的位置上
         */
        var oDiv_1=document.getElementById("div_1");
        var oDiv_3=document.getElementById("div_3");
        oDiv_1.replaceNode(oDiv_3);
      }
      function DOM_demo_5(){
        /*
         * 删除节点方式2：经常使用！
         * DIV中的方法：removeChild 从元素上删除子结点。 
         */
        var oDiv_1=document.getElementById("div_1");
        oDiv_1.parentNode.removeChild(oDiv_1);
      }
      function DOM_demo_4(){
        /*
         * 删除节点方式1：（自 杀方式）较少使用！
         * DIV中的方法：removeNode(boolean) 
         *             从文档层次中删除对象。
         * boolean代表是否删除子节点，默认是false 
         */
        var oDiv_1=document.getElementById("div_1");
        //oDiv_1.removeNode(false);//默认false，不删除子节点
        oDiv_1.removeNode(true);//true代表删除子节点
      }
      function DOM_demo_3(){
        /*
         *设置innerHTML方式添加节点：
         */
        var oDiv_1=document.getElementById("div_1");
        //oDiv_1.innerHTML="我是innerHTML属性";
        oDiv_1.innerHTML="<input type='button' value='按钮' />";
        //强烈注意：双引号里面只能单引号，不能再使用双引号
      }
      function DOM_demo_2(){
        /*
         * 创建并添加按钮节点：
         * 1，创建按钮节点,设置type
         * 2，获得DIV节点
         * 3，使用appendChild方法
         */
        var oButtonNode=document.createElement("input");
        oButtonNode.type="button";
        oButtonNode.value="我是一个按钮";
        var oDiv_1=document.getElementById("div_1");
        oDiv_1.appendChild(oButtonNode);
      }
      function DOM_demo_1(){
        /*
         * 创建并添加节点的第1种方式：
         * 1，createTextNode创建文本节点
         * 2，获得DIV节点
         * 3，使用appendChild方法
         */
        var oTextNode=document.createTextNode("这个是文字");
        var oDiv_1=document.getElementById("div_1");
        oDiv_1.appendChild(oTextNode);
      }
    </script>
    
    
    <div id="div_1">div区域。1</div>
    <div id="div_2">div区域。2</div>
    <div id="div_3">div区域。3</div>
    <div id="div_4">div区域。4</div>
    </body>
</html>

以上就是Javascript_9_DOM_节点练习的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

Javascript，DOM，节点练习 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Javascript_8_DOM_节点操作下一条：Javascript_10_DOM_练习