DOM07---通过节点的层次关系获取节点对象

来源：互联网发布：做生日贺卡的软件编辑：程序博客网时间：2024/05/18 00:03

<!--通过节点的层次关系获取节点对象关系：1、父节点：parentNode属性2、子节点：childNodes集合，获得全部子节点3、兄弟节点：上一个兄弟节点：previousSibling下一个兄弟节点: nextSibling--><html><head><title></title></head><body><script type="text/javascript">function getNodeByLevel(){var tabNode = document.getElementById("tableId");//获取父节点var parnode = tabNode.parentNode;alert(parnode.nodeName);//获取子节点var nodes = tabNode.childNodes;alert(nodes[0].nodeName);alert(nodes[0].childNodes[0].nodeName);//获取兄弟节点//上一个var prenode = tabNode.previousSibling;alert(prenode.nodeName);var nextnode = tabNode.nextSibling;alert(nextnode.nodeName);//尽量少用兄弟节点，会出现浏览器出现不同，解析方式不同，有的会解析标签中的空白节点(\n)}</script><input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel()" /><div>div区域</div><span>span区域</span><table id="tableId"><tr><td>单元格一</td><td>单元格二</td></tr></table><span>span区域</span><dl><dt>上层项目</dt><dt>下层项目</dt></dl><a href="">一个超链接</a></body></html>