1. 程式人生 > >【轉】Dom節點操作常用方法

【轉】Dom節點操作常用方法

1.訪問/獲取節點

document.getElementById(id);           //返回對擁有指定id的第一個物件進行訪問

document.getElementsByName(name);      //返回帶有指定名稱的節點集合   注意拼寫:Elements

document.getElementsByTagName(tagname);   //返回帶有指定標籤名的物件集合   注意拼寫:Elements

document.getElementsByClassName(classname);  //返回帶有指定class名稱的物件集合 注意拼寫:Elements

2.建立節點/屬性

document.createElement(eName);  //建立一個節點

document.createAttribute(attrName); //對某個節點建立屬性

document.createTextNode(text);   //建立文字節點

3.新增節點

document.insertBefore(newNode,referenceNode);  //在某個節點前插入節點

parentNode.appendChild(newNode);        //給某個節點新增子節點

4.複製節點

cloneNode(true | false);  //複製某個節點  引數:是否複製原節點的所有屬性

5.刪除節點

parentNode.removeChild(node);  //刪除某個節點的子節點 node是要刪除的節點

注意:為了保證相容性,要判斷元素節點的節點型別(nodeType),若nodeType==1,再執行刪除操作。通過這個方法,就可以在 IE和 Mozilla 完成正確的操作。

nodeType 屬性可返回節點的型別.最重要的節點型別是:

元素型別 節點型別
元素element 1
屬性attr 2
文字text 3
註釋comments 8
文件document 9

 

 

 

 

 

 

 

 

 

6.修改文字節點

方法 作用
appendData(data); 將data加到文字節點後面
deleteData(start,length); 將從start處刪除length個字元
insertData(start,data); 在start處插入字元,start的開始值是0;
replaceData(start,length,data); 在start處用data替換length個字元
splitData(offset); 在offset處分割文字節點
substringData(start,length); 從start處提取length個字元

  

 

 

 

 

 

 

 

 

 

 

7.屬性操作

getAttribute(name)    //通過屬性名稱獲取某個節點屬性的值

setAttribute(name,value);  //修改某個節點屬性的值

removeAttribute(name);  //刪除某個屬性


8.查詢節點

parentObj.firstChild;  //如果節點為已知節點的第一個子節點就可以使用這個方法。此方法可以遞迴進行使用 parentObj.firstChild.firstChild.....

parentObj.lastChild;  //獲得一個節點的最後一個節點,與firstChild一樣也可以進行遞迴使用 parentObj.lastChild.lastChild.....

parentObj.childNodes;   //獲得節點的所有子節點,然後通過迴圈和索引找到目標節點 

9.獲取相鄰的節點

curtNode.previousSibling;  //獲取已知節點的相鄰的上一個節點

curtNode.nextSlbling;    // 獲取已知節點的下一個節點

10.獲取父節點

childNode.parentNode;  //得到已知節點的父節點

11.替換節點

replace(newNode,oldNode);