您的位置：首页 > 其它

document对象通过节点的局次关系获取节点对象的方法演示：

2015-07-30 23:38 621 查看

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

关系：

1，父节点: parentNode:对应一个节点对象。

2，子节点：childNodes:对应一个节点集合。

3，兄弟节点：

上一个兄弟节点：previousSibling

下一个兄弟节点：nextSibling

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<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>
<script type="text/javascrip">
//获取页面中的表格节点。
var tabNode = document.getElementById("tabid");
//获取父节点。parentNode
// var node = tabNode.parentNode;
// alert(node.nodeName);//body

//获取子节点。childNodes
// var nodes = tabNode.childNodes;
// alert(nodes[0].nodeName);//结果为：因为浏览器的不同，会出现不同的结果。一种是#text,就是空白文本节点。另外一种就是TBODY

//获取兄弟节点。
//上一个。
var node = tabNode.previousSibling;
alert(node.nodeName);//SPAN或#text
//下一个
var node = tabNode.nextSibling.nextSibling;
alert(node.nodeName);

// 尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，
// 会解析出标签间的空白文本节点
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： document对象

相关文章推荐

新的分享

章节导航