js之DOM学习

常见节点类型：

元素节点：就是我们说的标签 eg:<a>

属性节点：a 标签里面的href 属性

文本节点：点击我

常用方法和属性：

方法：

1 得到节点集中方法：

　　通过ID 得到一个节点

　　通过name 得到一个节点集合

　　通过标签名tagName 得到一个节点集合

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。（指定节点末尾，即添加为最后一个孩子）
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

属性

nodeType——节点类型，元素节点是1，文本节点是3
nodeValue——节点值，元素节点为空，文本节点的nodeValue属性即为文本内容
firstChild——该元素节点包含的第一个子节点
lastChild——该元素节点包含的最后一个子节点
nextSibling——该节点的后一个兄弟节点
previousSibling——该节点的前一个兄弟节点
childNodes——子节点列表,可以通过node.childNodes[index]（或node.childNodes.item(index)）来获取子节点
nodeName——节点名称，对于元素节点，返回tagName,对于文本，则返回#text

注意点：

　　1 style border-bottom 应该写成borderBottom

　　2 不同浏览器在判断何为Text节点上存在一些差异。某些浏览器，如Mozilla，认为元素之间的空白(包括换行符)都是Text节点；而另一些浏览器，如IE，会全部忽略这些空白!!

var de = document.documentElement; var head = de.firstChild;//html下面第一个元素，可能是head var body = de.lastChild;//html下面最后一个元素，可能是body

答案并不确定，但是仍然有办法解决——使用节点类型检测,每个节点都有nodeType属性，指明它的节点类型。对于元素节点，它的值是1，而对于文本节点，它的值是3

　　var de = document.documentElement;

　　var head = de.firstChild.nodeType==1?de.firstChild:de.firstChild.nextSibling;

　　var body = de.lastChild.nodeType==1?de.lastChild:de.lastChild.previousSibling;]

　　//还可以使用childNodes var de = document.documentElement;

　　var head = de.childNodes[0].nodeType==1?de.childNodes[0]:de.childNodes[0].nextSibling;

　　var head = de.childNodes[1].nodeType==1?de.childNodes[1]:de.childNodes[1].previousSibling;

伯乐在线：http://web.jobbole.com/84364/