利用DOM节点关系访问HTML元素
2017-11-22 10:33
387 查看
一 介绍
一旦获取了某个元素,由于元素实际与DOM树的某个节点对应,因此我们完全可以利用节点之间的父子关系、兄弟关系来访问HTML元素。
下面应用利用节点关系访问HTML元素。
二 代码
三 运行结果
四 运行说明
需要指出的是,<ol>节点之间一共包含13个子节点,不不是6个子节点,因为在每两个<li>节点之间都有一片空白(换行和回车),每片空白也被当成了<ol>元素的子节点,因此访问当前节点的上一个节点是curTarget.previousSibling.previousSibling
大小: 11.6 KB
查看图片附件
一旦获取了某个元素,由于元素实际与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
大小: 11.6 KB
查看图片附件
相关文章推荐
- Javascrip: 利用节点关系访问HTML元素
- DOM文档对象模型利用节点访问HTML元素
- DOM节点访问关系与操作示例
- JavaScript DOM概述(获取节点的方法/节点的访问关系/节点创建添加删除复制/属性获取设置删除)
- JS 中DOM节点的访问关系
- 05 JS-DOM之-间接获取节点(即访问关系)
- DOM资料之节点之间的访问关系
- 访问DOM节点3——通过节点关系
- Dom 通过html元素的标签属性找节点 通过关系找标签
- DOM节点关系和DOM操作方法
- Dom解析是将xml文件全部载入,组装成一颗dom树,然后通过节点以及节点之间的关系来解析xml文件,下面结合这个xml文件来进行dom解析。
- js与DOM初步:访问html元素
- .若A,B两个实体是一对多的包含关系。利用存储过程,实现数据访问层层的一个实例。
- js的DOM节点访问与操作
- DOM节点关系及基本操作
- 深入理解DOM节点关系
- Dom-docment-通过节点层次关系获取
- javascript之DOM编程通过html元素的标签属性找节点
- JS访问DOM节点方法详解
- javascript之DOM编程通过html元素的标签属性找节点