HTML DOM

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

-

屬性	類型	說明
nodeName	String	節點名稱，根據節點的類型而定義
nodeValue	String	節點的值，根據節點的類型而定義
nodeType	Number	節點類型，1爲元素節點，2爲屬性節點，3爲文本節點
firstChild	Node	指向childNodes列表的第一個節點
lastChild	Node	指向childNodes列表的最後一個節點
childNodes	NodeList	全部子節點列表，childNodes[i]能夠訪問第i+1個節點
parentNode	Node	指向節點的父節點，若是已經是根節點，則返回null
previousSibling	Node	指向前一個兄弟節點，若是已經是第一個節點，則返回null
nextSibling	Node	指向後一個兄弟節點，若是已經是最後一個節點，返回null
Attributes	NameNodeMap	包含一個元素特性的Attr對象，僅用於元素節點
className	String	節點的CSS類
innerHTML	String	某個標記之間的全部內容，包括代碼自己

DOM節點的方法
（1）訪問節點：
【經過標籤名】
document.getElementsByTagName(sTagName)方法：返回一個包含某個相同標籤名的元素節點列表
【經過標籤ID】
document.getElementById(sElementId)方法：返回Id爲指定值的元素節點
【訪問前一個節點】兼容IE和FireFox

 

function prevSib(oNode){
var oTempFirstNode=oNode.parentNode.firstChild;
//判斷是不是第一個節點，若是是則返回null
if(oNode==oTempFirstNode)
return null;
var oTempNode=oNode.previousSibling;
//逐一搜索前面的兄弟節點，直到發現元素節點爲止
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling;
//三目運算符，若是是元素節點則返回節點自己，不然返回null
return (oTempNode.nodeType==1)?:oTempNode:null;
}

 【訪問後一個節點】兼容IE和FireFox function nextSib(oNode){ var oTempLastNode=oNode.parentNode.lastChild; //判斷是不是最後一個節點，若是是則返回null if(oNode==oTempLastNode) return null; var oTempNode=oNode.nextSibling; //逐一搜索後面的兄弟節點，直到發現元素節點爲止 while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null) oTempNode=oTempNode.nextSibling; //三目運算符，若是是元素節點則返回節點自己，不然返回null return(oTempNode.nodeType==1)?oTempNode:null; } （2）判斷一個節點是否有子節點： NodeObject.hasChildNodes()方法：當childNodes包含一個或多個節點時，返回true （3）設置節點屬性： eleNode.getAttribute(attrNode)方法：返回eleNode元素的attrNode屬性 eleNode.setAttribute(attrNode,sNewValue)方法：設置eleNode元素的attrNode屬性的值爲sNewValue （4）建立節點： document.createElement(eleNode)方法：建立一個元素節點eleNode document.createTextNode(textNode)方法：建立一個文本節點textNode document.createDocumentFragment()方法：建立文檔碎片節點 （5）添加節點： eleNode.appendChild(textNode)方法：將textNode節點添加到childNodes的末尾 （6）刪除節點： oNode.parentNode.removeChild(oNode)方法：從childNodes中刪除oNode節點 （7）替換節點： oNode.parentNode.replaceChild(oNewNode,oOldNode)方法：將childNodes中的oOldNode節點替換成oNewNode節點 （8）在特定節點前插入節點： oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法：在childNodes中的oTargetNode節點以前插入oNewNode節點 （9）在特定節點後插入節點： （自定義）oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法：在childNodes中的oTargetNode節點以後插入oNewNode節點

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