Javascrip: 利用节点关系访问HTML元素

最新推荐文章于 2023-03-30 10:52:21 发布

wang_gmail

最新推荐文章于 2023-03-30 10:52:21 发布

阅读量525

点赞数

分类专栏： Web前端文章标签： javascript 根据节点关系访问HTML元素

本文链接：https://blog.csdn.net/wang_gmail/article/details/29627229

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

/*
	* 需要注意的是： <ol../>节点一共有13子节点，而不是6个子节点！因为每俩个
	*                <li../>之间有一个换行.
	*	         但是  IE除外(与其他主流浏览器不同) 在IE下则有6个子节点.
	*
	*
	*/

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 根据节点关系访问HTML元素 </title>
	<style type="text/css">
		.selected {
			background-color:#66f
		}
	</style>
	</head>
	<body>
	<ol id="game">
		<li id="java">穿越火线</li>
		<li id="ssh">魔兽争霸</li>
		<li id="ajax" class="selected">极品飞车</li>
		<li id="xml">英雄联盟</li>
		<li id="ejb">侠盗飞车</li>
		<li id="workflow">流星蝴蝶剑</li>
	</ol>
	<input type="button" value="父节点"
		οnclick="change(curTarget.parentNode);"/>
	<input type="button" value="第一个"
		οnclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
	<input type="button" value="上一个"
		οnclick="change(curTarget.previousSibling.previousSibling);"/>
	<input type="button" value="下一个"
		οnclick="change(curTarget.nextSibling.nextSibling);"/>
	<input type="button" value="最后一个"
		οnclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
	<script type="text/javascript">
		var curTarget = document.getElementById("ajax");
		var change = function(target)
		{
			alert(target.innerHTML);
		}
	</script>
</body>
</html>