利用DOM节点关系访问HTML元素

一介绍

一旦获取了某个元素，由于元素实际与DOM树的某个节点对应，因此我们完全可以利用节点之间的父子关系、兄弟关系来访问HTML元素。

下面应用利用节点关系访问HTML元素。

二代码

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 根据节点关系访问HTML元素 </title>
	<style type="text/css">
		/* 定义改变背景色的CSS，表示被选中的项 */
		.selected {
			background-color:#66f
		}
	</style>
	</head>
	<body>
	<ol id="books">
		<li id="java">疯狂Java讲义</li>
		<li id="ssh">轻量级Java EE企业应用实战</li>
		<li id="ajax" class="selected">疯狂Ajax讲义</li>
		<li id="xml">疯狂XML讲义</li>
		<li id="ejb">经典Java EE企业应用实战</li>
		<li id="workflow">疯狂Android讲义</li>
	</ol>
	<input type="button" value="父节点"
		onclick="change(curTarget.parentNode);"/>
	<input type="button" value="第一个"
		onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
	<input type="button" value="上一个"
		onclick="change(curTarget.previousSibling.previousSibling);"/>
	<input type="button" value="下一个"
		onclick="change(curTarget.nextSibling.nextSibling);"/>
	<input type="button" value="最后一个"
		onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
	<script type="text/javascript">
		var curTarget = document.getElementById("ajax");
		var change = function(target)
		{
			alert(target.innerHTML);
		}
	</script>
</body>
</html>

三运行结果

四运行说明

需要指出的是，<ol>节点之间一共包含13个子节点，不不是6个子节点，因为在每两个<li>节点之间都有一片空白（换行和回车），每片空白也被当成了<ol>元素的子节点，因此访问当前节点的上一个节点是curTarget.previousSibling.previousSibling

利用DOM节点关系访问HTML元素

猜你喜欢