【轉】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);