js DOM模型操作

更新時(shí)間：2009年12月28日 23:57:05 作者：

文檔對象模型DOM（Document Object Module）定義了用戶操作文檔對象的接口，它使得用戶對HTML有了空前的訪問能力，并使開發(fā)者能將HTML作為XML文檔來處理。

DOM模型中的節(jié)點(diǎn)：元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)
例：<a href=”http://www.cnblogs.com/shuz”>私のdotnet小屋</a>
（1）a是元素節(jié)點(diǎn)
（2）“私のdotnet小屋”是文本節(jié)點(diǎn)
（3）href=”http://www.cnblogs.com/shuz”是屬性節(jié)點(diǎn)
DOM節(jié)點(diǎn)的屬性

屬性	類型	說明
nodeName	String	節(jié)點(diǎn)名稱，根據(jù)節(jié)點(diǎn)的類型而定義
nodeValue	String	節(jié)點(diǎn)的值，根據(jù)節(jié)點(diǎn)的類型而定義
nodeType	Number	節(jié)點(diǎn)類型，1為元素節(jié)點(diǎn)，2為屬性節(jié)點(diǎn)，3為文本節(jié)點(diǎn)
firstChild	Node	指向childNodes列表的第一個(gè)節(jié)點(diǎn)
lastChild	Node	指向childNodes列表的最后一個(gè)節(jié)點(diǎn)
childNodes	NodeList	所有子節(jié)點(diǎn)列表，childNodes[i]可以訪問第i+1個(gè)節(jié)點(diǎn)
parentNode	Node	指向節(jié)點(diǎn)的父節(jié)點(diǎn)，如果已是根節(jié)點(diǎn)，則返回null
previousSibling	Node	指向前一個(gè)兄弟節(jié)點(diǎn)，如果已是第一個(gè)節(jié)點(diǎn)，則返回null
nextSibling	Node	指向后一個(gè)兄弟節(jié)點(diǎn)，如果已是最后一個(gè)節(jié)點(diǎn)，返回null
Attributes	NameNodeMap	包含一個(gè)元素特性的Attr對象，僅用于元素節(jié)點(diǎn)
className	String	節(jié)點(diǎn)的CSS類
innerHTML	String	某個(gè)標(biāo)記之間的所有內(nèi)容，包括代碼本身

DOM節(jié)點(diǎn)的方法
（1）訪問節(jié)點(diǎn)：
【通過標(biāo)簽名】
document.getElementsByTagName(sTagName)方法：返回一個(gè)包含某個(gè)相同標(biāo)簽名的元素節(jié)點(diǎn)列表
【通過標(biāo)簽ID】
document.getElementById(sElementId)方法：返回Id為指定值的元素節(jié)點(diǎn)
【訪問前一個(gè)節(jié)點(diǎn)】兼容IE和FireFox
（自定義）

復(fù)制代碼代碼如下:

 
function prevSib(oNode){ 
var oTempFirstNode=oNode.parentNode.firstChild; 
//判斷是否是第一個(gè)節(jié)點(diǎn)，如果是則返回null 
if(oNode==oTempFirstNode) 
return null; 
var oTempNode=oNode.previousSibling; 
//逐一搜索前面的兄弟節(jié)點(diǎn)，直到發(fā)現(xiàn)元素節(jié)點(diǎn)為止 
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null) 
oTempNode=oTempNode.previousSibling; 
//三目運(yùn)算符，如果是元素節(jié)點(diǎn)則返回節(jié)點(diǎn)本身，否則返回null 
return (oTempNode.nodeType==1)?:oTempNode:null; 
} 

【訪問后一個(gè)節(jié)點(diǎn)】兼容IE和FireFox
（自定義）

復(fù)制代碼代碼如下:

 
function nextSib(oNode){ 
var oTempLastNode=oNode.parentNode.lastChild; 
//判斷是否是最后一個(gè)節(jié)點(diǎn)，如果是則返回null 
if(oNode==oTempLastNode) 
return null; 
var oTempNode=oNode.nextSibling; 
//逐一搜索后面的兄弟節(jié)點(diǎn)，直到發(fā)現(xiàn)元素節(jié)點(diǎn)為止 
while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null) 
oTempNode=oTempNode.nextSibling; 
//三目運(yùn)算符，如果是元素節(jié)點(diǎn)則返回節(jié)點(diǎn)本身，否則返回null 
return(oTempNode.nodeType==1)?oTempNode:null; 
} 

（2）判斷一個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)：
NodeObject.hasChildNodes()方法：當(dāng)childNodes包含一個(gè)或多個(gè)節(jié)點(diǎn)時(shí)，返回true
（3）設(shè)置節(jié)點(diǎn)屬性：
eleNode.getAttribute(attrNode)方法：返回eleNode元素的attrNode屬性
eleNode.setAttribute(attrNode,sNewValue)方法：設(shè)置eleNode元素的attrNode屬性的值為sNewValue
（4）創(chuàng)建節(jié)點(diǎn)：
document.createElement(eleNode)方法：創(chuàng)建一個(gè)元素節(jié)點(diǎn)eleNode
document.createTextNode(textNode)方法：創(chuàng)建一個(gè)文本節(jié)點(diǎn)textNode
document.createDocumentFragment()方法：創(chuàng)建文檔碎片節(jié)點(diǎn)
（5）添加節(jié)點(diǎn)：
eleNode.appendChild(textNode)方法：將textNode節(jié)點(diǎn)添加到childNodes的末尾
（6）刪除節(jié)點(diǎn)：
oNode.parentNode.removeChild(oNode)方法：從childNodes中刪除oNode節(jié)點(diǎn)
（7）替換節(jié)點(diǎn)：
oNode.parentNode.replaceChild(oNewNode,oOldNode)方法：將childNodes中的oOldNode節(jié)點(diǎn)替換成oNewNode節(jié)點(diǎn)
（8）在特定節(jié)點(diǎn)前插入節(jié)點(diǎn)：
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法：在childNodes中的oTargetNode節(jié)點(diǎn)之前插入oNewNode節(jié)點(diǎn)
（9）在特定節(jié)點(diǎn)后插入節(jié)點(diǎn)：
（自定義）oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法：在childNodes中的oTargetNode節(jié)點(diǎn)之后插入oNewNode節(jié)點(diǎn)

復(fù)制代碼代碼如下:

 
function insertAfter(oNewNode,oTargetNode){ 
var oParentNode=oTargetNode.parentNode; 
if(oParentNode.lastChild==oTargetNode) 
oParentNode.appendChild(oNewNode); 
else 
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling); 
} 

您可能感興趣的文章: