JavaScript---DOM模型之DOM树节点的增、删、改、查（二）

来源：互联网发布：伪造工资条软件编辑：程序博客网时间：2024/06/05 22:56

上一篇主要学习了DOM树节点的查，这一篇就要来学习，增，删，改。

DOM树节点的增

第一种情况：增加一个文本节点
三个步骤：

创建一个文本节点：document.createTextNode(“文本内容”)

var oTextNode = document.createTextNode("湖南城院");

找到要加在的位置（找到父节点）：主要是前面查的方法

var oDivNode = document.getElementById("div1")

.父节点把文本节点加进去：appendChild方法

oDiv.appendChild(oTextNode);

代码演示

 <body>        <div id="div1">div区域</div>        <hr/>        <input type="button" value="间接查询childNodes" onclick="demo1()">        <input type="button" value="间接查询children" onclick="demo2()">      <script type="text/javascript">            function demo1(){                // 创建一个文本节点     createTextNode                var oTextNode = document.createTextNode(",增加的文本节点");                // 找到要添加的位子（父节点）                var oDivNode = document.getElementById("div1");                // 把文本节点添加进去                oDivNode.appendChild(oTextNode);            }      </script>  </body>

添加前
这里写图片描述
添加后

第二种情况：增加一个普通元素节点
三个步骤（与前面类似）

创建一个普通元素 createElement(元素名)

var oNode = document.createElement("input");

找到要加在的位置（找到父节点）：主要是前面查的方法

var oDivNode = document.getElementById("div1")

.父节点把文本节点加进去：appendChild方法

oDiv.appendChild(oNode);

添加前
这里写图片描述
添加后

第二种添加元素节点方法： innerHTML 方法和 innerText方法

第一步找到添加位置（父节点）

var oDiv = document.getElementById("div1");

第二步直接调用方法添加

oDiv.innerText = "abc123"oDiv.innerHTML = '<input type="button" value="一个新按钮" onclick="add2()">';

演示
这里写图片描述

整片学习代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>DOM模型演示---增删改查中的增</title>    </head>    <body>       <div id="div1">   </div>       <hr/>       <input type="button" value="添加1" onclick="add1()"><br/>       <input type="button" value="添加2" onclick="add2()"><br/>       <input type="button" value="添加3" onclick="add3()"><br/>        <script type="text/javascript">            //1添加一个文本节点            function add1(){                //1创建一个文件节点                var oTextNode = document.createTextNode("湖南城院");                //2获取div节点                var oDiv = document.getElementById("div1");                //3把文本节点加成div节点的孩子                oDiv.appendChild(oTextNode);            }            //2添加一个按钮节点            function add2(){                //1创建一个文件节点                var oInputNode = document.createElement("input");                oInputNode.type="button";                oInputNode.value="一个新按钮";                //2获取div节点                var oDiv = document.getElementById("div1");                //3把文本节点加成div节点的孩子                oDiv.appendChild(oInputNode);            }            //3通过每个标签的innerHTML属性也可以添加节点            function add3(){                //1获取div节点                var oDiv = document.getElementById("div1");                //2设置div节点的innerHTML属性 (innerText属性也可以，但只是文本内容)                //oDiv.innerText="abc132";                //oDiv.innerText=oDiv.innerText+"abc132";                oDiv.innerHTML='<input type="button" value="一个新按钮" onclick="add2()">';            }        </script>    </body></html>

接下来就是删除节点

删除节点方法两种：
第一种： 自己调用removeNode(true/false) true,false是否删除子节点返回值为被删除的节点（不知道为什么敲代码这个浏览器没用，360也不行，换了老的IE）

var oDivNode = document.getElementById("div2");//true 表示删除子节点  false 表示不删除子节点var boo= oDivNode.removeNode(false);

删除节前
这里写图片描述
删除节点后（不删除子节点
删除子节点

还有一种删除的方式，通过父节点来删除自己。与上一种类似，仅仅是调用了.parentNode.removeChild(oldNode)方法

function delNode(){    var oDivNode = document.getElementById("div2");    //true 表示删除子节点  false 表示不删除子节点    var boo= oDivNode.removeNode(true);    通过父节点来删除自己 removeChild()会整个子树一起删除    oDivNode.parentNode.removeChild(oDivNode);}

接下来就是—改（替换）

替换有两种情况，移动替换（交换）和克隆替换

移动替换如下
这里写图片描述

克隆替换如下
这里写图片描述

两者代码演示

<body>       <div id="div1"> 第一个div  </div>       <div id="div2">                        第二个div            <a href="#a">aaaa</a>           <span>eeee</span>       </div>       <div id="div3"> 第三个div  </div>       <hr/>        <input type="button" value="移动替换" onclick="updateNode1()">        <input type="button" value="克隆替换" onclick="updateNode2()">      <script type="text/javascript">            function updateNode1(){                //先拿到两个要移动替换的节点 oDiv1 oDiv3                var oDiv1 = document.getElementById("div1");                var oDiv3 = document.getElementById("div3");                // 利用父节点调用 replaceChild （oDiv1,oDiv3）                oDiv1.parentNode.replaceChild(oDiv1, oDiv3);            }            function updateNode2(){                //先拿到两个要移动替换的节点 oDiv1 oDiv3                var oDiv1 = document.getElementById("div1");                var oDiv3 = document.getElementById("div3");                // 克隆衣服oDiv3.cloneNode(true/false) 是否克隆子节点 默认false;                var  copyoDiv3 = oDiv3.cloneNode();                oDiv3.parentNode.replaceChild(copyoDiv3, oDiv1)            }      </script>  </body>

替换前
这里写图片描述
移动替换

克隆替换（不带子树）

克隆替换带子树

上课时学习代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>DOM模型演示---增删改查中的删</title>        <style type="text/css">            div{                border: #00ff00 solid 1px;                width: 200px;                height:50px;                margin:10px;            }            #div1{                background-color: #770077            }            #div2{                background-color: #00DD00            }            #div3{                background-color: #FFFF00            }        </style>    </head>    <body>       <div id="div1"> 第一个div  </div>       <div id="div2">                        第二个div            <a href="#a">aaaa</a>           <span>eeee</span>       </div>       <div id="div3"> 第三个div  </div>       <hr/>       <input type="button" value="删除" onclick="delNode()"><br/>        <script type="text/javascript">            function delNode(){                var oDivNode = document.getElementById("div2");                //var boo = oDivNode.removeNode(false); //删除后，所有子节点上升一层                //var boo = oDivNode.removeNode(true); //连子节点一起删除                alert(boo);                //建议比较干净删除方式,让父节点删除子节点            //  oDivNode.parentNode.removeChild(oDivNode); //removeChild()会整个子树一起删除            }        </script>        <br/>        <input type="button" value="移动替换" onclick="updateNode()"><br/>        <input type="button" value="克隆替换" onclick="updateNode2()"><br/>        <script type="text/javascript">            //用div3 替换 div1            //1移动替换            function updateNode(){                var oDivNode1 = document.getElementById("div1");                var oDivNode3 = document.getElementById("div3");                //oDivNode1.replaceNode(oDivNode3);                oDivNode1.parentNode.replaceChild(oDivNode3,oDivNode1);            }            //2克隆替换            function updateNode2(){                var oDivNode1 = document.getElementById("div1");                var oDivNode3 = document.getElementById("div3");                var oCopyDiv3 = oDivNode3.cloneNode(true);//空参默认为cloneNode(false),代表子树不克隆。相反，cloneNode(true)会连子树一起克隆                oDivNode1.parentNode.replaceChild(oCopyDiv3,oDivNode1);            }        </script>       </body></html>

2 0