DOM模型

DOM属性和方法函数

属性/方法名	类型	说明
nodeName	String	节点名称
nodeValue	String	节点的值
nodeType	Number	节点类型
firstChild	Node	指向childNodes列表中的第一个节点
lastChild	Node	指向childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点列表
parentNode	Node	指向节点的父节点，如果已经是根节点，则返回null
previousSibling	Node	指向前一个兄弟节点，如果该节点已经是第一个节点，则返回Null
nextSibling	Node	指向后一个兄弟节点，如果该节点已经是最后一个节点，则返回Null
haschidlNodes()	Boolean	当childNodes一个或多个节点时，返回true
attritutes	nameNodeMap	包含一个元素特性的Attr对象，仅用于元素节点
appendChild()	node	将node节点添加到childNodes的末尾
removeChild()	node	从childNodes节点中删除node节点
replaceChild(newnode,oldnode)		将childNodes节点中olenode节点替换成newnode节点
insertBefore(newnode,refnode)		在childnodes节点中的refnode前插入newnode节点

 

节点类型nodeType:

nodeType 的值为1，2，3时，分别表示元素节点，属性节点，文本节点

 

removeChild:   父节点.removeChild(子节点)

注意：通常的方法是先寻找到欲删除的节点，然后再利用parentNode属性寻找到其父节点，再用此removeChild()方法函数把此子节点删除。

appendChild:   父节点.removeChild(子节点)，appendchild()方法函数只能把节点添加到父节点中子节点列表(childNodes)的最后面

replaceChild：父节点. replaceChild(新子节点，旧子节点)   功能：用新子节点来替换旧子节点

insertBefore：父节点.insertBefore(新节点，目标节点)；

 

tagName和nodeName的区别：

tagName只能用在元素节点上，而nodeName可以用在任何节点（元素节点，文本节点，属性节点）上

 

getAttribute(属性) //获取节点属性

setAttribute(属性，参数) //设置节点属性

例如：

var inputt = document.createElement("input");//创建一个input元素节点
inputt.setAttribute("type", "button");//为input元素节点设置type属性为button
inputt.setAttribute("value", "按钮");//为input元素节点设置value属性为按钮
inputt.setAttribute("id", "bt2");//为input元素节点设置id属性为bt2
i.appendChild(inputt);//将创建的input属性添加到<div>的childNodes（div的所有子列表）的末尾
inputt.setAttribute("onclick", "a()"); //设置添加的input按钮事件为onclick事件，并且此事件响应的函数是a()