一 介绍
一旦获取了某个元素，由于元素实际与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
相关推荐
文档对象模型——Document Object Model DOM可以视为一种API的应用 将文件视为一个文件对象，通过程序语言调用DOM对象，来对该文件的某些特定...HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
利用DOM规范，可以实现DOM文档和XML之间的相互转换，遍历、操作相应DOM文档的内容。可以说，要自由的操纵XML文件，就要用到DOM规范。DOM文档中的逻辑结构可以用节点树的形式进行表述。通过对XML文件的解析处理，XML...
12.5 访问和操纵DOM节点 12.5.1 打开每一个盒子--遍历节点 12.5.2 弄清层级关系--父子与兄弟 12.5.3 如何搜索特定节点 12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点...
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的...
要找元素，必须利用document对象（当前网页文件） 精确查找某个ID的元素：document.getElementById(id名)； 9.null和undefined： |--null：一个特殊的值，表示“无值”--空对象。数据类型为Object |--undefined...
4.9 关系表达式 4.10 逻辑表达式 4.11 赋值表达式 4.12 表达式计算 4.13 其他运算符 第5章 语句 5.1 表达式语句 5.2 复合语句和空语句 5.3 声明语句 5.4 条件语句 5.5 循环 5.6 跳转 5.7 其他语句类型 5.8 ...
4.9 关系表达式 4.10 逻辑表达式 4.11 赋值表达式 4.12 表达式计算 4.13 其他运算符 第5章 语句 5.1 表达式语句 5.2 复合语句和空语句 5.3 声明语句 5.4 条件语句 5.5 循环 5.6 跳转 5.7 其他语句类型 5.8 ...
4.9 关系表达式 4.10 逻辑表达式 4.11 赋值表达式 4.12 表达式计算 4.13 其他运算符 第5章 语句 5.1 表达式语句 5.2 复合语句和空语句 5.3 声明语句 5.4 条件语句 5.5 循环 5.6 跳转 5.7 其他语句类型 5.8 ...
4.9 关系表达式 74 4.10 逻辑表达式 79 4.11 赋值表达式 81 4.12 表达式计算 83 4.13 其他运算符 86 第5章 语句 91 5.1 表达式语句 92 5.2 复合语句和空语句 92 5.3 声明语句 94 5.4 条件语句 96 5.5 循环 101 5.6 ...
此外，读者还可以通过访问itzcn网站来获得即时在线帮助。 《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书，也可以作为RIA Web程序开发的培训教材。 第1章 JavaScript入门必备 1.1 JavaScript语言概述 ...
此外，读者还可以通过访问itzcn网站来获得即时在线帮助。 《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书，也可以作为RIA Web程序开发的培训教材。 第1章 JavaScript入门必备 1.1 JavaScript语言概述 ...
20.3 利用ie userdata持久化数据 592 20.4 应用程序存储和离线web应用 594 第21章 多媒体和图形编程 606 21.1 脚本化图片 606 21.2 脚本化音频和视频 608 21.3 svg：可伸缩的矢量图形 615 21.4 [canvas]中的图形 623...
20.3 利用ie userdata持久化数据 592 20.4 应用程序存储和离线web应用 594 第21章 多媒体和图形编程 606 21.1 脚本化图片 606 21.2 脚本化音频和视频 608 21.3 svg：可伸缩的矢量图形 615 21.4 [canvas]中的图形 623...
12.6 从XML DOM节点的子树中删除仅有空白符的文本节点 451 12.7 解析Microsoft Excel的XML 452 12.8 验证XML文档 454 12.9 过滤属于指定命名空间的元素和属性 455 12.10 用SAX合并连续的文本事件 458 12.11 ...
9、改善“网页_访问”中最后一个参数（代理地址）为“”符号时无法访问网页，感谢易友【z00544】反馈。 精易模块 V3.82 what’s new：（20140816） 1、修复“时间_取现行时间戳”有时不能正常返回13位时间戳，当...