1.DOM创建节点的方法：
document.createElement(Tag)，tag是HTML元素
2.DOM复制节点的方法
节点.cloneNode(boolean,deep)，当deep=true时，表示复制当前节点以及节点呈现的内容，当deep=false时表示只复制节点
3.DOM添加、删除节点的方法
- appendChild(abb)：将abb添加成当前节点的最后一个子节点
- insertBefore（abb，crr）：在crr节点之前插入abb节点
- replaceChild（abb，crr）：将crr节点替换成abb节点
- removeChild（crr）：将crr节点删除
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>创建元素</title>
<script type="text/javascript">
//创建/插入/替换节点
function create(){
var food=document.getElementById("food");
var element=document.createElement("li");
element.innerHTML="辣条";
//food.appendChild(element); //创建节点
//food.insertBefore(element,food.firstChild.nextSibling); //插入节点
food.replaceChild(element,food.firstChild.nextSibling); //替换节点
}
//复制节点
function copy(){
var food=document.getElementById("food");
var element=food.firstChild.nextSibling.cloneNode(true);
food.appendChild(element);
}
//删除节点
function del(){
var food=document.getElementById("food");
var element=food.firstChild.nextSibling;
food.removeChild(element);
}
</script>
</head>
<body>
<ul id="food">
<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为列表框、下拉框添加选项的方式
创建选项的方法：1）通过createElement方法
2）使用专门的构造器：new Option（text,value,defaultSelected,selected）
构造器的四个参数：
text：该选项的文本
value：选中该选项的值
defaultSelected：设置默认是否显示该选项
selected：设置该选项当前是否被选中
注意：构造的时候不是必须把四个参数都选中，假如有一个参数则默认是text，假如是两个参数则默认第一个是text，第二是value
5.添加创建好的选项至下拉框的方式
直接为<selecte...../>的指定选项赋值
下拉框对象.options[i]=创建好的option对象
6.删除下拉框的方式（两种方式）
1）直接用下拉框对象.remove(index)方法删除指定选项
2）或者直接将指定选项赋值为null
对象.options[index]=null
代码测试如下：
<!DOCTYPE html>
<html>
<head>
<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="food";
document.getElementById("test").appendChild(element);
}
//逐条删除列表框内容
function delOne(){
var food=document.getElementById("food");
if(food.options.length>0){
//food.remove(food.options.length-1); //逐条删除列表框内容
food.options[food.options.length-1]=null;//或者使用这种方法逐条删除列表框内容
}
}
//一次性清除列表框内容
function clearAll(){
if(food.options.length>0){
food.options.length=0;
}
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个列表" onclick="createSelect()">
<input type="button" value="逐条删除列表框内容" onclick="delOne()">
<input type="button" value="一次性清除列表框内容" onclick="clearAll()">
</body>
</html>7.DOM动态添加删除表格内容所使用到的常用方法
insertRow(inset)：在指定索引处插入一行
createCaption()：为表格创建标题
deleteRow(index)：删除指定索引处的行
deleteCaption()：删除标题
<!DOCTYPE html>
<html>
<head>
<title>对表格元素进行增删改操作</title>
<script type="text/javascript">
//创建一个五行四列的表格
function createTable(){
var b=document.getElementById("test");
var t=document.createElement("table");
t.border="1";
t.id="mytable";
var caption=t.createCaption();
caption.innerHTML="我的表格";
for(var i=0;i<5;i++){
var tr=t.insertRow(i);
for(var j=0;j<4;j++){
var td=tr.insertCell(j);
td.innerHTML="单元格"+i+j;
}
}
b.appendChild(t); //把创建的表格添加在body内容下方
}
//删除最后一行
function deleteLastRow(){
var t=document.getElementById("mytable"); //获取表格
if(t.rows.length>0){
t.deleteRow(t.rows.length-1);
}
}
//删除最后一个单元格
function deleteLastCell(){
var t=document.getElementById("mytable"); //获取表格
var LastRows=t.rows[t.rows.length-1]; //获取最后一行
if(LastRows.cells.length>0){
LastRows.deleteCell(LastRows.cells.length-1);
}
}
</script>
</head>
<body id="test">
<input type="button" value="创建一个五行四列的表格" onclick="createTable()"/>
<input type="button" value="删除最后一行" onclick="deleteLastRow()"/>
<input type="button" value="删除最后一个单元格" onclick="deleteLastCell()"/>
</body>
</html>