|
|
例：<a href=”http://www.cnblogs.com/shuz”>私のdotNET小屋</a>
（1）a是元素節(jié)點
（2）“私のdotNET小屋”是文本節(jié)點
（3）href=”http://www.cnblogs.com/shuz”是屬性節(jié)點
DOM節(jié)點的屬性
屬性 | 類型 | 說明 |
nodeName | String | 節(jié)點名稱，根據(jù)節(jié)點的類型而定義 |
nodeValue | String | 節(jié)點的值，根據(jù)節(jié)點的類型而定義 |
nodeType | Number | 節(jié)點類型，1為元素節(jié)點，2為屬性節(jié)點，3為文本節(jié)點 |
firstChild | Node | 指向childNodes列表的第一個節(jié)點 |
lastChild | Node | 指向childNodes列表的最后一個節(jié)點 |
childNodes | NodeList | 所有子節(jié)點列表，childNodes[i]可以訪問第i+1個節(jié)點 |
parentNode | Node | 指向節(jié)點的父節(jié)點，如果已是根節(jié)點，則返回null |
previousSibling | Node | 指向前一個兄弟節(jié)點，如果已是第一個節(jié)點，則返回null |
nextSibling | Node | 指向后一個兄弟節(jié)點，如果已是最后一個節(jié)點，返回null |
Attributes | NameNodeMap | 包含一個元素特性的Attr對象，僅用于元素節(jié)點 |
className | String | 節(jié)點的CSS類 |
innerHTML | String | 某個標記之間的所有內(nèi)容，包括代碼本身 |
（1）訪問節(jié)點：
【通過標簽名】
document.getElementsByTagName(sTagName)方法：返回一個包含某個相同標簽名的元素節(jié)點列表
【通過標簽ID】
document.getElementById(sElementId)方法：返回Id為指定值的元素節(jié)點
【訪問前一個節(jié)點】兼容IE和FireFox
（自定義）
復(fù)制代碼 代碼如下:
function prevSib(oNode){
var oTempFirstNode=oNode.parentNode.firstChild;
//判斷是否是第一個節(jié)點，如果是則返回null
if(oNode==oTempFirstNode)
return null;
var oTempNode=oNode.previousSibling;
//逐一搜索前面的兄弟節(jié)點，直到發(fā)現(xiàn)元素節(jié)點為止
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling;
//三目運算符，如果是元素節(jié)點則返回節(jié)點本身，否則返回null
return (oTempNode.nodeType==1)?:oTempNode:null;
}
【訪問后一個節(jié)點】兼容IE和FireFox
（自定義）
復(fù)制代碼 代碼如下:
function nextSib(oNode){
var oTempLastNode=oNode.parentNode.lastChild;
//判斷是否是最后一個節(jié)點，如果是則返回null
if(oNode==oTempLastNode)
return null;
var oTempNode=oNode.nextSibling;
//逐一搜索后面的兄弟節(jié)點，直到發(fā)現(xiàn)元素節(jié)點為止
while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null)
oTempNode=oTempNode.nextSibling;
//三目運算符，如果是元素節(jié)點則返回節(jié)點本身，否則返回null
return(oTempNode.nodeType==1)?oTempNode:null;
}
（2）判斷一個節(jié)點是否有子節(jié)點：
NodeObject.hasChildNodes()方法：當(dāng)childNodes包含一個或多個節(jié)點時，返回true
（3）設(shè)置節(jié)點屬性：
eleNode.getAttribute(attrNode)方法：返回eleNode元素的attrNode屬性
eleNode.setAttribute(attrNode,sNewValue)方法：設(shè)置eleNode元素的attrNode屬性的值為sNewValue
（4）創(chuàng)建節(jié)點：
document.createElement(eleNode)方法：創(chuàng)建一個元素節(jié)點eleNode
document.createTextNode(textNode)方法：創(chuàng)建一個文本節(jié)點textNode
document.createDocumentFragment()方法：創(chuàng)建文檔碎片節(jié)點
（5）添加節(jié)點：
eleNode.appendChild(textNode)方法：將textNode節(jié)點添加到childNodes的末尾
（6）刪除節(jié)點：
oNode.parentNode.removeChild(oNode)方法：從childNodes中刪除oNode節(jié)點
（7）替換節(jié)點：
oNode.parentNode.replaceChild(oNewNode,oOldNode)方法：將childNodes中的oOldNode節(jié)點替換成oNewNode節(jié)點
（8）在特定節(jié)點前插入節(jié)點：
oTargetNode.parentNode.insertBefore(oNewNode,oTargetNode)方法：在childNodes中的oTargetNode節(jié)點之前插入oNewNode節(jié)點
（9）在特定節(jié)點后插入節(jié)點：
（自定義）oTargetNode.parentNode.insertAfter(oNewNode,oTargetNode)方法：在childNodes中的oTargetNode節(jié)點之后插入oNewNode節(jié)點
復(fù)制代碼 代碼如下:
function insertAfter(oNewNode,oTargetNode){
var oParentNode=oTargetNode.parentNode;
if(oParentNode.lastChild==oTargetNode)
oParentNode.appendChild(oNewNode);
else
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling);
}
JavaScript技術(shù)：js DOM模型操作，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
