JavaScript之DOM文档对象模型--对HTML元素的增删操作
1、DOM创建节点的方法：
document.createElement(Tag),Tag必须是合法的HTML元素；
2、DOM复制节点的方法：
节点.cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点全部后代节点。为false时，只复制当前节点。
3、DOM添加、删除节点的方法：
appendChild(newNode):将newNode添加成当前节点的最后一个子节点；
insertBefore(newNode,refNode):在refNode节点之前插入newNode节点；
replaceChild(newNode,oldNode):将oldNode节点替换成newNode节点；
removeChild(oldNode):将oldNode子节点删除。
例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>创建元素</title> <script type="text/javascript"> function create(){ var city=document.getElementById("city"); var element=document.createElement("li"); element.innerHTML="南京"; city.append(element); //city.insertBefore(element, city.firstChild.nextSibling); //city.replaceChild(element, city.firstChild.nextSibling); } function copy(){ var city=document.getElementById("city"); var element=city.firstChild.nextSibling.cloneNode(true); city.append(element); } function del(){ var city=document.getElementById("city"); var element=city.firstChild.nextSibling; city.removeChild(element); } /*总结：DOM对和HTML元素的增删改操作 1、DOM创建节点的方法： document.createElement(Tag),Tag必须是合法的HTML元素； 2、DOM复制节点的方法： 节点.cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点全部后代节点。为false时，只复制当前节点。 3、DOM添加、删除节点的方法： appendChild(newNode):将newNode添加成当前节点的最后一个子节点； insertBefore(newNode,refNode):在refNode节点之前插入newNode节点； replaceChild(newNode,oldNode):将oldNode节点替换成newNode节点； removeChild(oldNode):将oldNode子节点删除。 */ </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> </html>
4、DOM为列表框、下拉菜单添加选项的方式：
创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。语法如下：
new Option(text,value,defaultSelected,selected)
该构造器有4个参数，说明如下：
text:该选项的文本，即该选项所呈现的“内容”；
value:选中该选项的值；
defaultSelected:设置默认是否显示该选项；
selected:设置该选项当前是否被选中。
提示：并不是每次构造都需要指明4个参数，可以指明一个或者两个都可以，假如一个的话指明的是text，
假如两个的话，第一个参数是text，第二个参数是value。
5、添加创建好的选项至列表框或下拉菜单的方式：
直接为<select.../>的指定选项赋值
列表框或下拉菜单对象.option[i]=创建好的option对象；
6、删除列表框、下拉菜单的选项的方法：
(1)直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项；
(2)直接将指定选项赋值为null。
即 列表框或下拉菜单对象.remove(index)或 对象.options[index]=null。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>查找表单控件</title> <script type="text/javascript"> function createSelect(){ var element=document.createElement("select"); for(var i=0;i<10;i++){ var op=new Option("新增的选项"+i,i); element.options[i]=op; } element.size=5; element.id="city"; document.getElementById("test").appendChild(element); } function delOneByOne(){ var city=document.getElementById("city"); if(city.options.length>0){ //city.remove(city.options.length-1);//方法一 city.options[city.options.length-1]=null;//方法二 } } function delAll(){ var city=document.getElementById("city"); if(city.options.length>0){ city.options.length=0; } } /*总结： 4、DOM为列表框、下拉菜单添加选项的方式： 创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。语法如下： new Option(text,value,defaultSelected,selected) 该构造器有4个参数，说明如下： text:该选项的文本，即该选项所呈现的“内容”； value:选中该选项的值； defaultSelected:设置默认是否显示该选项； selected:设置该选项当前是否被选中。 提示：并不是每次构造都需要指明4个参数，可以指明一个或者两个都可以，假如一个的话指明的是text， 假如两个的话，第一个参数是text，第二个参数是value。 5、添加创建好的选项至列表框或下拉菜单的方式： 直接为<select.../>的指定选项赋值 列表框或下拉菜单对象.option[i]=创建好的option对象； 6、删除列表框、下拉菜单的选项的方法： (1)直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项； (2)直接将指定选项赋值为null。 即 列表框或下拉菜单对象.remove(index)或 对象.options[index]=null。 */ </script> </head> <body id="test"> <div> <input type="button" value="创建一个城市列表框" onclick="createSelect()"> <input type="button" value="一条条删除列表框内容" onclick="delOneByOne()"> <input type="button" value="一次性清空列表框内容" onclick="delAll()"> </div> </body> </html>
7、DOM动态添加删除表格内容所使用的常用方法：
insertRow(index):在指定索引位置插入一行；
createCaption():为该表格创建标题；
createTFoot():为该表格创建<tfoot.../>元素，假如已存在就返回现有的；
createTHead():为该表格创建<thead.../>元素，假如已存在就返回现有的；
deleteRow(index):删除表格中index索引处的行；
deleteCaption():删除表格的标题；
deleteTFoot():从表格中删除tfoot元素及其内容；
deleteTHead():从表格中删除thead元素及其内容。
8、给表格行创建、删除单元格的方法：
insertCell(index):在index处创建一个单元格，返回新创建的单元格；
deleteCell(index):删除某行在index索引处的单元格。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>对表格元素进行增删改操作</title> <script type="text/javascript"> function createTable(){ var bod=document.getElementById("test"); var tab=document.createElement("table"); tab.border="1"; tab.id="myTable"; var cap=tab.createCaption();//创建表格标题 cap.innerHTML="我的表格"; for(var i=0;i<5;i++){ var tr=tab.insertRow(i);//创建行 for(var j=0;j<4;j++){//创建列 var td=tr.insertCell(j); td.innerHTML="单元格["+i+"]["+j+"]"; } } bod.appendChild(tab); } function deleteLastRow(){ var tab=document.getElementById("myTable"); if(tab.rows.length>0){ tab.deleteRow(tab.rows.length-1); } } function deleteLastCell(){ var tab=document.getElementById("myTable"); if(tab.rows.length>0){ var lastRow=tab.rows[tab.rows.length-1]; if(lastRow.cells.length>0){ lastRow.deleteCell(lastRow.cells.length-1); } } } /*总结： 7、DOM动态添加删除表格内容所使用的常用方法： insertRow(index):在指定索引位置插入一行； createCaption():为该表格创建标题； createTFoot():为该表格创建<tfoot.../>元素，假如已存在就返回现有的； createTHead():为该表格创建<thead.../>元素，假如已存在就返回现有的； deleteRow(index):删除表格中index索引处的行； deleteCaption():删除表格的标题； deleteTFoot():从表格中删除tfoot元素及其内容； deleteTHead():从表格中删除thead元素及其内容。 8、给表格行创建、删除单元格的方法： insertCell(index):在index处创建一个单元格，返回新创建的单元格； deleteCell(index):删除某行在index索引处的单元格。 */ </script> </head> <body id="test"> <input type="button" value="创建一个5行4列的表格" onclick="createTable()"> <input type="button" value="删除最后一行" onclick="deleteLastRow()"> <input type="button" value="删除最后一个单元格" onclick="deleteLastCell()"> </body> </html>
