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);


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM