|
DOM是一種結(jié)構(gòu)化對象模型提供了標(biāo)簽對象通用的訪問方式，將HTML文件視為一個節(jié)點(diǎn)樹，每一個標(biāo)簽和文字都是一個節(jié)點(diǎn)，可以訪問每個節(jié)點(diǎn)和節(jié)點(diǎn)內(nèi)容。
這樣我們就可以通過DOM提供給的方法、接口來訪問HTML內(nèi)容，而不需要單個元素一個一個的查詢。
優(yōu)點(diǎn)：
跨平臺和程序語言的程序接口
DOM提供應(yīng)用程序環(huán)境的一種標(biāo)準(zhǔn)程序處理接口，這是一種HTML和XML文件的標(biāo)準(zhǔn)API，可以再網(wǎng)絡(luò)上交換數(shù)據(jù)。
支持多種文件格式
支持多種程序語言
DOM提供了幾個屬性可以容易的訪問樹結(jié)構(gòu)中的節(jié)點(diǎn)。如下
以parentNode、childNodes、previousSibling為例進(jìn)行說明，看下面代碼
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<script language="javascript">
//顯示當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
function showParentNode()
{
//獲得當(dāng)前節(jié)點(diǎn)對象
var myObj=document.getElementById("lilongsheng");
//查找父節(jié)點(diǎn)
var parent=myObj.parentNode;
//顯示父節(jié)點(diǎn)名
alert(parent.nodeName);
}
//顯示孩子節(jié)點(diǎn)列表，返回類型為NodeList
function showchild()
{
//獲得當(dāng)前節(jié)點(diǎn)對象
var myObj=document.getElementById("lilongsheng");
//查找節(jié)點(diǎn)的子節(jié)點(diǎn)列表
var child=myObj.childNodes;
//循環(huán)顯示子節(jié)點(diǎn)列表
for (var i=0;i<child.length;i++)
{
alert(child[i].nodeName);
}
}
//顯示下一個兄弟節(jié)點(diǎn)
function showSibling()
{
//獲得當(dāng)前節(jié)點(diǎn)對象
var myObj=document.getElementById("lilongsheng");
//查找下一個兄弟節(jié)點(diǎn)
var sibling=myObj.nextSibling;
//顯示
alert(sibling.nodeName);
}
</script>
</head>
<body>
<form>
<ul id="lilong">
<li id="lilongsheng">
<a href="#" >標(biāo)題1</a>
<a href="#" >標(biāo)題2</a>
<a href="#" >標(biāo)題3</a>
<a href="#" >標(biāo)題4</a>
</li>
<hr/>
</ul>
<input type="button" onclick="showParentNode()" value="獲取父標(biāo)簽名" />
<input type="button" onclick="showchild()" value="獲取子標(biāo)簽名" />
<input type="button" onclick="showSibling()" value="獲取兄弟標(biāo)簽名" />
</form>
</body>
</html>
分別單擊三個單選按鈕，可以獲得結(jié)果如下：
  
分別獲得當(dāng)前標(biāo)簽的父標(biāo)簽、子標(biāo)簽、兄弟標(biāo)簽，其余方法不再累述，可以使用這些簡單的方法實(shí)現(xiàn)對DOM文檔模型里的元素進(jìn)行增、刪、改、查，操作DOM文檔。
待續(xù)……
|
