Home >Web Front-end >JS Tutorial >Javascript_9_DOM_node exercise

Javascript_9_DOM_node exercise

黄舟Original: 2017-01-18 16:36:041317browse

Javascript_9_DOM_node exercise

<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=&#39;button&#39; value=&#39;按钮&#39; />";
        //强烈注意：双引号里面只能单引号，不能再使用双引号
      }
      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>

The above is the content of Javascript_9_DOM_node exercise. For more related content, please pay attention to the PHP Chinese website (www.php.cn )!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript_8_DOM_Node operationNext article：Javascript_8_DOM_Node operation

See more

Javascript_9_DOM_node exercise

Related articles