<!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>
