js DOM 操作

DOM模型：

 

1利用节点访问html元素

• nodeType——节点类型，元素节点是1，文本节点是3
• nodeValue——节点值，元素节点为空，文本节点的nodeValue属性即为文本内容
• nodeName——节点名称，对于元素节点，返回tagName,对于文本，则返回#text

Node   parentNode:返回当前节点的父节点

Node   previousSibling:返回当前节点的前一个兄弟节点

Node   nextSibling:返回当前节点的后一个兄弟节点

Node[]  childNodes:返回当前节点的所有子节点。

Node[]  getElementsByTagName(tagName) :返回当前节点的具有指定标签名的所有子节点

Node   firstChild:返回当前节点的第一个子节点。

Node   lastChild:返回当前节点 的最后一个子节点。

2 增加HTML元素

1 创建 或复制节点

document.createElement();//创建节点

cloneNode(boolean  deep )//克隆节点

当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点，当deep为false时，表示仅复制当前节点

2 添加节点：

创建好节点，一定要把节点加入 到dom树中。

appendChild(newNode);//把newNode节点添加 到当前节点的最后一个子节点。

innerBefore(newNode,refNode)//在refNode节点之前插入newNode节点。

replaceChild(newNOde,oldNode);//将oldNOde替换成newNode

 

3 为列表框，下拉菜单添加选项

add(option,before);在brefore之前添加option，如果想在最菜单最后添加，则高brefore为null;

例：

<script type=”text/javascript”>

var  a =document.createElement(“select”);

for(var i=0;i<=5;i++){

var op=document.createElement(“option”);

op.innerHTML(“新增的选项”+i);

a.add(op,null);

}

//然后把select I添加到body中

</script>

 

 

4动态添加表格：

innerRow(index);//在index处添加行

innerCell(index);//在index处添加单元格

例：

<script type=”text/javascript”>

var a =document.createElement(“table”);

a.border=1;

for(var i=0;i<5;i++){

var tr=a.innerRow(i);

 for(var j=0;j<5;j++){

var td=tr.innerCell(j);

td.innerHTML(“单元格内容是”+i+j);

}

}

Document.getElementById(“body”).append(“a”);

</script>

 

5删除html元素

removeChild(oldNode);//删除OldNode节点

remove(oldNode);//删除列表框，下拉菜单的选项

delectRow(index);//删除index索引处的行

deleteCell(index);//删除index索引处的单元格

6

document.getElementById("input").disabled=true/false;

document.getElementById("input").removeAtrribute("disabled");

document.getElementById("input").getAttribute("disabled");

document.getElementById("input").setAttribute("disabled","disabled");