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