<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom_demo.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!--
通過節點的層次關系獲取節點對象。
關系：
1，父節點: parentNode:對應一個節點對象。
2，子節點：childNodes:對應一個節點集合。
3，兄弟節點：
上一個兄弟節點：previousSibling
下一個兄弟節點：nextSibling
-->
<script type="text/javascript">
function getNodeByLevel(){
//獲取表格節點
var tabNode=document.getElementById("tabid");
//獲取父節點
//var parentNode=tabNode.parentNode;
//alert(parentNode.nodeName);//BODY
//獲取子節點
//var childNodes=tabNode.childNodes;
//alert(childNodes[0].nodeName);//TBODY
//alert(childNodes[0].childNodes[0].nodeName);//TR
//獲取兄弟節點
//var brotherNode=tabNode.previousSibling;
//var brotherNode=tabNode.nextSibling;
//alert(brotherNode.nodeName);//#text
//為什么是#text而不是SPAN呢？因為在</span>和<table>中間有回車換行。
//注意：盡量少用兄弟節點，因為在解析的時候會出現瀏覽器不同解析不一致，會解析出標簽間的空白文本節點
}
</script>
<input type="button" value="通過節點層次關系獲取節點" onclick="getNodeByLevel()"/>
<div>div區域</div>
<span>span區域</span>
<table id="tabid">
<tr>
<td>單元格一</td>
<td>單元格二</td>
</tr>
</table>
<span>span區域11</span>
<dl>
<dt>上層項目</dt>
<dd>下層項目</dd>
</dl>
<a href=''>一個超鏈接</a>
</body>
</html>
