DOM（一）-15-(通过节点层次关系获取节点)

最新推荐文章于 2023-04-14 09:10:19 发布

wy_0928

最新推荐文章于 2023-04-14 09:10:19 发布

阅读量716

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47809697

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

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

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

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（一）-15-(通过节点层次关系获取节点)

【通过节点层次关系获取节点】、、三者关系中，称为和公共的父节点，而和都称为的子节点，和称为兄弟节点，其中前者是后者的上一个兄弟节点，后者是前者的后一个兄弟节点【注意】一个节点的父节点只有一个，一个节点的子节点可以有多个所以只要拿到任一个节点，都可以通过其层次关系获取到任意节点对象。【总结】节点间关系：以下标记的属性都以div节点对象中的属性为
复制链接

扫一扫