一 介绍
一旦获取了某个元素，由于元素实际与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
相关推荐
在本章“第06章 DOM节点操作（上）”中，我们将深入探讨Document Object Model（DOM）在JavaScript中的应用，以及如何通过DOM接口来操纵HTML或XML文档的结构、内容和样式。DOM是一种标准，它允许编程语言与网页内容...
总结，DOM节点操作是Web开发中不可或缺的一部分，熟练掌握这些方法和概念将使你能够有效地操控页面元素，实现丰富的交互效果。无论是添加、删除还是修改元素，或者处理事件，都需要对DOM有深入的理解。通过不断地...
5. **Unigrid与HTML5的结合**：可能涉及在Unigrid的单元格中嵌入HTML5内容，比如通过自定义单元格格式化函数来插入HTML5元素，或者利用JavaScript事件监听来响应用户交互。 6. **事件处理**：在Delphi中，可以绑定...
在IT领域，尤其是在Web开发和数据抓取方面，"谷歌获取网页DOM的插件"是一种非常实用的...通过利用这个插件，可以提高数据抓取的效率和准确性，尤其对于那些依赖JavaScript呈现的数据，如动态加载的内容或交互式元素。
3. **添加元素**：使用`createElement()`创建新的DOM节点，然后用`appendChild()`将其添加到文档中。 4. **删除元素**：使用`removeChild()`从文档中移除节点。 #### DOM 中的重要数据类型 在DOM中，有几个关键的...
在Visual Studio环境下，我们可以利用jQuery进行DOM节点的创建、插入等操作。下面我们将详细探讨这些知识点： 1. **创建DOM节点** - 使用`document.createElement()`函数可以创建新的DOM元素。例如，创建一个带有...
总的来说，这个项目将强化你对原生JavaScript和DOM操作的理解，特别是如何利用数组方法来处理DOM节点，提高代码的效率和可读性。通过实践，你会更加熟练地驾驭DOM，为构建交互式Web应用打下坚实的基础。在实际工作中...
3. 使用JavaScript访问DOM节点 可以通过JavaScript中的DOM方法来访问和操作HTML文档中的节点。示例中使用了`getElementsByTagName`和`getElementById`方法： - `getElementsByTagName`返回文档中所有指定标签名的...
HTML DOM（Document Object Model）是Web开发中用于访问和操作HTML文档的标准接口。它是一个树状结构，将HTML页面中的每个组成部分（元素、属性、文本等）表示为一个节点，使得JavaScript可以方便地读取、修改和操纵...
3. **选择节点**：如何使用`getElementById`、`getElementsByTagname`、`querySelector`和`querySelectorAll`等方法选取特定的HTML元素。 4. **创建和删除节点**：介绍如何使用`createElement`、`appendChild`、`...
- `createElement`: 创建新的HTML元素。 - `appendChild`: 在指定元素的子元素末尾添加新元素。 - `insertBefore`: 在指定元素的子元素前插入新元素。 - `removeChild`: 删除指定的子元素。 3. **属性操作** -...
它提供了一种结构化的表示方式，将文档解析成一个由节点组成的树形结构，使得开发者可以通过JavaScript或其他脚本语言来...通过深入学习和实践，开发者可以充分利用DOM的强大功能，提升网页应用的用户体验和功能性。
### JavaScript DOM 节点 API 个人总结 #### 文档概述 本文档旨在总结JavaScript中DOM（Document Object Model）节点API的基本用法及其在实际开发中的应用。通过深入理解这些API，开发者能够更加灵活地操控网页文档...
- **通过利用节点之间的关系**：例如，通过父节点找到其所有子节点。 #### 节点信息 - `nodeName`：获取节点名称。 - `nodeValue`：获取或设置节点的值。 - `nodeType`：节点的类型，例如元素（1）、属性（2）、...
本文将深入探讨DOM在JavaScript中的应用，包括DOM的基本概念、节点类型、节点层次结构和如何查找并操作DOM节点。 一、DOM概念 DOM是Document Object Model（文档对象模型）的缩写，是一种以树状结构来表示HTML或XML...
- **实例演示**：通过具体的代码示例展示如何利用DOM API修改HTML文档，例如改变页面元素的颜色、位置或者内容等。 #### 六、HTML DOM 参考手册 - **对象列表**：列举了DOM提供的各种对象，包括： - **DOMWindow...
在本文中，我们将深入探讨使用jQuery复制DOM节点的方法，重点介绍clone()方法以及如何利用appendTo()方法将复制的节点追加到目标位置。 首先，clone()方法是jQuery中用于复制节点的核心方法。clone()方法可以创建...
- **元素（Element）**：HTML标签对应于DOM中的元素节点，例如`<body>`、`<p>`等。 - **属性（Attribute）**：元素上的属性，如`class`、`id`等。 - **文档对象（Document）**：整个HTML或XML文档的根节点，可以...
Simple HTML DOM支持CSS选择器，这使得定位HTML元素变得非常直观。例如，你可以用`find('.class')`来查找所有具有指定类名的元素，或者用`find('#id')`来找到特定ID的元素。 7. **性能与优化** 虽然Simple HTML ...
在JavaScript中，我们可以通过以下方式访问DOM节点： 1. `getElementById()`：通过元素的ID获取节点，这是最直接的方法。 2. `getElementsByClassName()`：返回具有特定类名的所有元素的NodeList。 3. `...