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