js DOM模型操作

2019-11-21 00:51:37

字體：大中小

來源：轉載

供稿：網友

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

屬性	類型	說明
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); 
} 

上一篇：js 學習筆記（三）

下一篇：滾動條變色隱藏滾動條與雙擊網頁自動滾屏顯示代碼