dom增删改查
一、创建节点
document.createElement(Tag)，Tag必须是合法的HTML元素
二、DOM添加、删除节点的方法：
|
appendChild(newNode) |
将newNode添加成当前节点的最后一个子节点 |
|
insertBefore(newNode,refNode) |
将refNode节点之前插入newNode节点 |
|
replaceChild(newNode,oldNode) |
将oldNode节点替换成newNode节点 |
|
removeChild(oldNode) |
将oldNode子节点删除 |
例如：
<script type="text/javascript"> //replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点 function create1(){ //创建一个li节点 var li=document.createElement("li"); //自行添加文本属性等在 li.innerHTML="lalallala"; //获取ul元素 var city=document.getElementById("city"); //将li元素添加到ul元素上 li变量 city.appendChild(li); } /*添加到第一个节点*/ function create2(){ //创建li元素 var a=document.createElement("li"); a.innerHTML="你是谁"; //获取ul元素 var city=document.getElementById("city"); //获取要插入的位置的那个元素 适用通用的利用节点关系访问HTML元素。 var first=city.firstChild.nextSibling; //插入元素，将定义的a插入到first之前 city.insertBefore(a,first); } function create(){ //创建li元素 var b=document.createElement("li"); b.innerHTML="山东"; //获取ul元素 var ul=document.getElementById("city"); //获取要替换的旧元素 var old=ul.lastChild.previousSibling; //替换 将b替换到old位置后 ul.replaceChild(b,old); } /*复制节点*/ var count=0; function copy(){ count++; var ul=document.getElementById("city"); //获取city中的ul元素，变成全局变量，共享 if(count==1){ //获取你要复制的节点，ul中的最后一个节点 var old=ul.lastChild.previousSibling; //复制节点 复制当前节点及后代节点 true真，false只复制本身 var li=old.cloneNode(true); //将li元素添加到ul元素中 ul.appendChild(li); }else{ //获取city中的ul元素 var ul=document.getElementById("city"); //获取你要复制的节点，ul中的最后一个节点 var old=ul.lastChild; //复制节点 复制当前节点及后代节点 var li=old.cloneNode(true); //在ul元素中添加li ul.appendChild(li); } } function del(){ //获取ul元素 var ul=document.getElementById("city"); //获取要删除的元素,ul中的最后一个元素 var old=ul.lastChild.previousSibling; //ul中删除old ul.removeChild(old); } </script> </head> <body> <ul id="city"> <li>北京</li> <li>上海</li> </ul> <input type="button" value="创建插入替换节点" onClick="create()"> <input type="button" value="复制节点" onClick="copy()"> <input type="button" value="删除节点" onClick="del()"> </body>
二、下拉菜单表单控件：
function create(){ //创建select元素 var select=document.createElement("select"); //id属性 select.id="city"; select.size=5; //循环创建10个option元素并添加到select元素上 for(i=0;i<10;i++){ //创建option元素 var op=new Option("选项"+1,i); //添加option元素到select上 select.options[i]=op; } //将select添加到body中，从第一个数组开始 var body=document.getElementsByTagName("body")[0]; // var body=document.getElementById("test"); //添加元素 添加节点到目前的最后一个节点 body.appendChild(select); } function del(){ var select1=document.getElementById("city"); //判断是否满足数组》0 if (select1.length>0) { //select1中的下拉列表的长度 select1.remove(select1.options.length-1); } } function qk(){ var select=document.getElementById("city"); if(select.length>0){ select.options.length=null; } } </script> </head> <body id="test"> <input type="button" value="创建一个城市列表框" onClick="create()"> <input type="button" value="一条条删除列表框的内容" onClick="del()"> <input type="button" value="一次性清空列表框内容" onClick="qk()"> </body>
重点：通过循环来逐个将option添加到select上面
三、表格的增删改查
<script type="text/javascript"> function create(){ //创建表格元素 var table=document.createElement("table"); table.id="mytable"; table.border="1px"; //创建五行 for循环=5 i=5 for(var i=0;i<5;i++){ var row=table.insertRow(i); //每一行创建四列 每行四个列 for(var j=0;j<4;j++){ var cell=row.insertCell(j); cell.innerHTML="第"+(i+1)+"行第"+(j+1)+"列"; } } //将table元素添加到body标签中 var body=document.getElementById("test"); body.appendChild(table); } function del(){ //获取table元素 var table=document.getElementById("mytable"); //判断表格中有行再删除 if(table.rows.length>0){ table.deleteRow(table.rows.length-1); } } //表格的列cell是通过行来控制的，所以前面不能加table.row.cell，但行是通过table来控制，所以可以加table.rows，row是table的单个行，rows是返回该表格里的所有表格行(数组)，cell是单元格联合 function del1(){ //获取table元素 var table=document.getElementById("mytable"); //获取最后一行 var row=table.rows[table.rows.length-1]; if(row.cells.length>0){ //删除最后一列，删除行内单元格数组的最后一位 row.deleteCell(row.cells.length-1); } //如果最后一行所有列都没有了就删除最后一行 else{ tal.deleteRow(table.rows.length-1); } } </script> </head> <body id="test"> <input type="button" value="创建一个5行4列的表格" onClick="create()"> <input type="button" value="删除最后一行" onClick="del()"> <input type="button" value="删除最后一个单元格" onClick="del1()"> </body>
表格与其不同的地方在于她要从行列开始创建，并且要记住是table.rows这是表格的全部行，这是row.deleteCell表格行里的单元格。不要弄混。
表格行的创建删除
|
insertRow(index) |
在指定索引位置插入一行 |
|
createCaption() |
为该表格创建标题 |
|
deleteRow(index) |
删除表格中index索引处的行 |
给表格行创建、删除单元格的方法：
|
insertCell(index) |
在index处创建一个单元格，返回新创建的单元格 |
|
deleteCell(index) |
删除某行在index索引处的单元格 |
