/*
* 需要注意的是: <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>