【通过节点层次关系获取节点】
<html>、<head>、<body>三者关系中,<html>称为<head>和<body>公共的父节点,而<head>和<body>都称为<html>的子节点,
<head>和<body>称为兄弟节点,其中前者是后者的上一个兄弟节点,后者是前者的后一个兄弟节点
【注意】一个节点的父节点只有一个,一个节点的子节点可以有多个
所以只要拿到任一个节点,都可以通过其层次关系获取到任意节点对象。
【总结】
节点间关系:以下标记的属性都以div节点对象中的属性为例(详见DHTML API)
1.父节点:属性parentNode(对应一个节点对象):获取文档层次中的父对象。
2.子节点:集合childNodes(对应一个节点集合):获取作为指定对象【直接后代】的HTML元素和TextNode对象的集合。
(这里拿到的全是“儿子”)
3.兄弟节点:
上一个兄弟节点:属性previousSibling:获取对此对象的上一个兄弟对象的引用。
下一个兄弟节点:属性nextSibling:获取对此对象的下一个兄弟对象的引用。
(由于IE和火狐在解析兄弟节点时候会出现差异,所以尽量少用兄弟节点)
===================================================================================
【示例】通过<table>节点“切入”,所以在<table>中加入id,然后再由<table>节点根据其层次关系获取其他节点
<html>
<head>
</head>
<body>
<script type="text/javascript">
function getNodesByLevel(){
//获取表格节点
var tabNode = document.getElementById("tabid");
//获取<table>节点的父节点:parentNode
var node = tabNode.parentNode;//获取到的是节点对象
alert(node.nodeName);//弹出BODY,说明<table>节点的父节点是<body>
//获取<table>节点的父节点的父节点,即<table>的爷爷
var node2 = tabNode.parentNode.parentNode;//获取到的是节点对象
alert(node2.nodeName);//弹出HTML,说明<table>节点是<html>节点的孙子
//获取<table>节点的子节点:childNodes
var nodes = tabNode.childNodes;//获取到的是节点集合
alert(nodes[0].nodeName);//弹出TBODY,因为表格中即使不写也默认有TBODY
//获取节点<tr>:childNodes
var nodes2 = tabNode.childNodes;
alert(nodes2[0].childNodes[0].nodeName);//弹出TR
//这里先通过表格节点拿到其“儿子们”集合nodes2,然后nodes2[0]是“大儿子”TBODY,然后TBODY再用childNodes获取其大儿子
//获取兄弟节点——上一个:previousSibling
var node3 = tabNode.previousSibling;
alert(node3.nodeName);//弹出DIV
//获取兄弟节点——下一个:nextSibling
var node4 = tabNode.nextSibling;
alert(node4.nodeName);//弹出SPAN
}
</script>
<input type="button" value="通过节点层次关系获取节点" οnclick="getNodesByLevel()"/>
<div>div区域</div>
<table id="tabid">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<span>span区域</span>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
</dl>
<a href="">一个超链接</a>
</body>
</html>