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

来源：互联网发布：12306 手机网络有问题编辑：程序博客网时间：2024/05/17 17:40

/** 需要注意的是： <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="父节点"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>

0 0