通过节点层次关系获取节点

<!--
通过节点的层次关系获取节点对象。

关系：
1、父节点：parentNode：对应一个节点对象。
2、子节点：childNodes：对应一个节点集合。
3、兄弟节点：
上一个兄弟节点：parviousSibling
下一个兄弟节点：nextSibling
-->
<script type="text/javascript">
function getNodeByLevel(){
//获取页面中的表格节点
var tabNode = document.getElementById("tabid");

//获取父节点。parentNode
//var node = tabNode.parentNode;
//alert(node.nodeName);

//获取子节点。childNodes
//var nodes = tabNode.childNodes;
//alert(nodes[0].childNodes.nodeName);


//获取兄弟节点
//上一个
var node = tabNode.previousSibling;
alert(node.nodeName);

var node = tabNode.nextSibling;
alert(node.nodeName);
//注意：尽量少用兄弟节点，因为在解析的时候会出现浏览器解析不一致。
//会解析出标签见的空白文本节点
}
</script>
<input type="button" value="通过节点层次关系获取节点" οnclick="getNodeByLevel()" />

<div>div区域</div>
<table id="tabid">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
</table>
<dl>
<dt>上层项目</dt>
<dl>下层项目</dl>
</dl>
</div>
<a href="" >一个超链接</a>

转载于:https://www.cnblogs.com/aineko/p/3778616.html