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:返回当前节点 的最后一个子节点。

增加HTML元素

创建 或复制节点

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

cloneNode(boolean  deep )//克隆节点

deeptrue时,表示在复制当前节点的同时,复制该节点的全部后代节点,当deepfalse时,表示仅复制当前节点

添加节点:

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

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

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

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

 

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

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

例:

<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");



 

原文地址:https://www.cnblogs.com/soofly/p/3462645.html