分類： js節(jié)點(diǎn)操作
1.訪問(wèn)節(jié)點(diǎn)
document.getElementById(id);
返回對(duì)擁有指定id的第一個(gè)對(duì)象進(jìn)行訪問(wèn)
document.getElementsByName(name);
返回帶有指定名稱的節(jié)點(diǎn)集合
注意:Elements
document.getElementsByTagName(tagname);
返回帶有指定標(biāo)簽名的對(duì)象集合
注意：Elements
document.getElementsByClassName(classname);
返回帶有指定class名稱的對(duì)象集合
注意：Elements
2.生成節(jié)點(diǎn)
document.createElement(eName);
創(chuàng)建一個(gè)節(jié)點(diǎn)
document.createAttribute(attrName);
對(duì)某個(gè)節(jié)點(diǎn)創(chuàng)建屬性
document.createTextNode(text);
創(chuàng)建文本節(jié)點(diǎn)
3.添加節(jié)點(diǎn)
document.insertBefore(newNode,referenceChild);
在某個(gè)節(jié)點(diǎn)前插入節(jié)點(diǎn)
parentNode.appendChild(newNode);
給某個(gè)節(jié)點(diǎn)添加子節(jié)點(diǎn)
4.復(fù)制節(jié)點(diǎn)
cloneNode(true | false);
復(fù)制某個(gè)節(jié)點(diǎn)
參數(shù)：是否復(fù)制原節(jié)點(diǎn)的所有屬性
5.刪除節(jié)點(diǎn)
parentNode.removeChild(node)
刪除某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)
node是要?jiǎng)h除的節(jié)點(diǎn)
注意：IE會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)(例如，換行符號(hào))，而Mozilla不會(huì)這樣做。在刪除指定節(jié)點(diǎn)的時(shí)候不會(huì)出錯(cuò)，但是如果要?jiǎng)h除最后一個(gè)子結(jié)點(diǎn)或者是第一個(gè)子結(jié)點(diǎn)的時(shí)候，就會(huì)出現(xiàn)問(wèn)題。這時(shí)候，就需要用一個(gè)函數(shù)來(lái)判斷首個(gè)子結(jié)點(diǎn)的節(jié)點(diǎn)類型。
元素節(jié)點(diǎn)的節(jié)點(diǎn)類型是 1，因此如果首個(gè)子節(jié)點(diǎn)不是一個(gè)元素節(jié)點(diǎn)，它就會(huì)移至下一個(gè)節(jié)點(diǎn)，然后繼續(xù)檢查此節(jié)點(diǎn)是否為元素節(jié)點(diǎn)。整個(gè)過(guò)程會(huì)一直持續(xù)到首個(gè)元素子節(jié)點(diǎn)被找到為止。通過(guò)這個(gè)方法，我們就可以在 Internet Explorer 和 Mozilla 得到正確的方法。
6.修改文本節(jié)點(diǎn)
appendData(data);
將data加到文本節(jié)點(diǎn)后面
deleteData(start,length);
將從start處刪除length個(gè)字符
insertData(start,data)
在start處插入字符,start的開(kāi)始值是0;
replaceData(start,length,data)
在start處用data替換length個(gè)字符
splitData(offset)
在offset處分割文本節(jié)點(diǎn)
substringData(start,length)
從start處提取length個(gè)字符
7.屬性操作
getAttribute(name)
通過(guò)屬性名稱獲取某個(gè)節(jié)點(diǎn)屬性的值
setAttribute(name,value);
修改某個(gè)節(jié)點(diǎn)屬性的值
removeAttribute(name)
刪除某個(gè)屬性
? function? Load_message()
? {
? ? var oimg=document.getElementById("a");
? ? ? alert(oimg.getAttribute("border"));
? ? oimg.setAttribute("alt","DOM Test");
? }
?
8.查找節(jié)點(diǎn)
parentObj.firstChild
如果節(jié)點(diǎn)為已知節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)就可以使用這個(gè)方法。此方法可以遞歸進(jìn)行使用
parentObj.firstChild.firstChild.....
parentObj.lastChild
獲得一個(gè)節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)，與firstChild一樣也可以進(jìn)行遞歸使用
parentObj.lastChild.lastChild.....
parentObj.childNodes
獲得節(jié)點(diǎn)的所有子節(jié)點(diǎn)，然后通過(guò)循環(huán)和索引找到目標(biāo)節(jié)點(diǎn)
9.獲取相鄰的節(jié)點(diǎn)
neborNode.previousSibling :獲取已知節(jié)點(diǎn)的相鄰的上一個(gè)節(jié)點(diǎn)
nerbourNode.nextSlbling: 獲取已知節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)
10.獲取父節(jié)點(diǎn)
childNode.parentNode:得到已知節(jié)點(diǎn)的父節(jié)點(diǎn)
11替換節(jié)點(diǎn) 方法replace(new,old)
? ? ? function replaceMessage()
? ? ? {
? ? ? var oNewp=document.createElement("p");
? ? ? var oText=document.createTextNode("World Hello");
? ? ? oNewp.appendChild(oText);
? ? ? var oOldp=document.body.getElementsByTagName("p")[0];
? ? ? oOldp.parentNode.replaceChild(oNewp,oOldp);
? ? ? }
? ? ?
hello world!
?
?
