首页
/ 正文

XML DOM – 导航节点（超详细）

更新时间: 2025-04-08 00:14:50

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

前言

在现代软件开发中，XML（可扩展标记语言）因其结构清晰、跨平台兼容性强的特点，被广泛应用于配置文件、数据交换和复杂数据存储场景。而DOM（文档对象模型）作为解析和操作XML文档的核心接口，为开发者提供了灵活的编程能力。XML DOM – 导航节点是DOM技术的关键组成部分，它允许开发者像“探索树形结构”一样定位、遍历和操作文档中的各个节点。无论是处理复杂的数据层级，还是提取特定信息，掌握节点导航方法都能显著提升开发效率。本文将从基础概念到实战案例，逐步解析这一技术的核心逻辑，并通过比喻和代码示例帮助读者建立直观理解。

XML DOM 的基础概念

什么是DOM？

DOM（Document Object Model）是将XML文档表示为树形结构的一组对象。每个节点（如元素、文本、属性等）都是树中的一个“枝叶”，而开发者可以通过编程方式访问和修改这些节点。可以将DOM想象为一座“数据城堡”：

根节点是城堡的主塔，代表XML文档的起点。
元素节点是城堡的房间和走廊，承载具体数据。
文本节点是房间内的物品，存储实际内容。
属性节点是门上的锁孔，描述元素的额外信息。

通过DOM提供的导航方法，开发者可以像“探险者”一样，在这座城堡中自由穿梭。

XML节点的类型

XML文档中的节点可以分为以下几种类型（通过nodeType属性判断）：

nodeType 值	节点类型	描述
1	元素节点	XML中的标签，如`<book>`或`<author>`。
2	属性节点	元素的属性，如`<book id="B001">`中的`id`。
3	文本节点	元素内的文本内容，如`<title>XML入门指南</title>`中的“XML入门指南”。
9	文档节点	表示整个XML文档的根节点。

注意：在遍历节点时，空格或换行符也可能被解析为文本节点，需特别留意。

节点导航的核心方法

节点关系与核心属性

DOM中的每个节点都有明确的父子、兄弟关系，开发者可通过以下属性或方法访问这些关系：

1. 父节点（Parent Node）

属性：parentNode
作用：返回当前节点的直接父节点。

示例：

const childNode = document.querySelector("book");  
const parentNode = childNode.parentNode; // 返回父元素节点

2. 子节点（Child Nodes）

属性：childNodes
作用：返回当前节点的所有子节点（包括元素、文本、注释等）。
注意：子节点按文档顺序排列，索引从0开始。

3. 兄弟节点（Sibling Nodes）

方法：nextSibling 和 previousSibling
作用：分别返回当前节点的下一个和上一个兄弟节点。

核心方法详解

1. 遍历子节点：`firstChild` 和 `lastChild`

这两个方法用于获取节点的第一个或最后一个子节点。例如：

const firstChild = parentNode.firstChild; // 可能是文本节点（如换行符）  
const lastChild = parentNode.lastChild;

注意：若父节点包含文本节点（如换行符），firstChild可能不是预期的元素节点，需通过循环过滤。

2. 定位特定子节点：`querySelector` 和 `getElementsByTagName`

querySelector()：通过CSS选择器定位单个节点。

const firstBook = document.querySelector("book"); // 定位第一个book元素

getElementsByTagName()：返回指定标签名的所有子元素。

const allBooks = document.getElementsByTagName("book"); // 返回HTMLCollection

3. 动态创建与插入节点

通过createElement()和appendChild()方法，可以动态构建节点树：

const newBook = document.createElement("book");  
const titleNode = document.createTextNode("新书");  
newBook.appendChild(titleNode); // 将文本节点添加到book元素中  
document.body.appendChild(newBook); // 将book元素添加到根节点

实际案例：导航XML文档的实战演练

案例1：遍历书籍目录

假设有一个XML文档描述书籍信息：

<library>  
  <book id="B001">  
    <title>XML入门指南</title>  
    <author>张三</author>  
    <price>49.9</price>  
  </book>  
  <book id="B002">  
    <title>DOM编程实战</title>  
    <author>李四</author>  
    <price>59.9</price>  
  </book>  
</library>

目标：提取所有书籍的标题和作者

步骤解析：

获取根节点（library）。
遍历其所有子节点（book元素）。
对每个book节点，查找其子节点title和author的文本内容。

代码实现（JavaScript）：

const xmlDoc = loadXMLDoc("books.xml"); // 假设已加载XML文档  
const books = xmlDoc.getElementsByTagName("book");  

for (let i = 0; i < books.length; i++) {  
  const book = books[i];  
  const title = book.getElementsByTagName("title")[0].textContent;  
  const author = book.getElementsByTagName("author")[0].textContent;  
  console.log(`书籍标题：${title}，作者：${author}`);  
}

案例2：动态修改节点内容

假设需要将所有书籍的价格提高10%：

const priceNodes = xmlDoc.getElementsByTagName("price");  

for (let node of priceNodes) {  
  const originalPrice = parseFloat(node.textContent);  
  node.textContent = (originalPrice * 1.1).toFixed(2);  
}

进阶技巧与常见问题

技巧1：过滤空文本节点

在遍历子节点时，换行或缩进可能生成空文本节点。可通过判断节点类型过滤：

const children = parentNode.childNodes;  
for (let i = 0; i < children.length; i++) {  
  const child = children[i];  
  if (child.nodeType === 1) { // 只处理元素节点  
    // 执行操作  
  }  
}

技巧2：使用XPath简化导航

XPath是一种强大的节点定位语言，可替代复杂的层级遍历。例如：

const books = xmlDoc.evaluate(  
  "//book[author='张三']", // 查找作者为张三的书籍  
  xmlDoc,  
  null,  
  XPathResult.ANY_TYPE,  
  null  
);  

let result = books.iterateNext();  
while (result) {  
  console.log(result.textContent);  
  result = books.iterateNext();  
}

常见问题：节点不存在时的错误处理

若通过getElementById或getElementsByTagName找不到节点，返回值可能为null或空集合。建议添加条件判断：

const targetNode = xmlDoc.getElementById("B001");  
if (targetNode) {  
  // 执行操作  
} else {  
  console.error("节点不存在");  
}

结论

XML DOM – 导航节点是开发者高效操作XML文档的“地图”与“指南针”。通过理解节点类型、掌握核心方法，并结合实际案例练习，开发者能够灵活地解析复杂结构、提取所需数据，甚至动态修改文档内容。无论是构建配置文件解析工具，还是处理跨平台数据交换，扎实的节点导航能力都是不可或缺的技能。

建议读者通过以下步骤实践：

使用在线XML编辑器（如XMLGrid ）创建示例文档。
用JavaScript或Python（如xml.dom模块）编写导航代码。
逐步调试并观察节点关系的变化。

掌握这一技术后，开发者将能更自信地应对需要处理结构化数据的项目挑战。

XML DOM – 导航节点（超详细）

前言

XML DOM 的基础概念

什么是DOM？

XML节点的类型

节点导航的核心方法

节点关系与核心属性

1. 父节点（Parent Node）

2. 子节点（Child Nodes）

3. 兄弟节点（Sibling Nodes）

核心方法详解

1. 遍历子节点：`firstChild` 和 `lastChild`

2. 定位特定子节点：`querySelector` 和 `getElementsByTagName`

3. 动态创建与插入节点

实际案例：导航XML文档的实战演练

案例1：遍历书籍目录

目标：提取所有书籍的标题和作者

案例2：动态修改节点内容

进阶技巧与常见问题

技巧1：过滤空文本节点

技巧2：使用XPath简化导航

常见问题：节点不存在时的错误处理

结论

最新发布

HTML DOM Style borderTopStyle 属性（长文解析）

HTML DOM Style borderTopWidth 属性（手把手讲解）

HTML DOM Style borderWidth 属性（手把手讲解）

HTML DOM Style outline 属性（手把手讲解）

HTML DOM Style outlineStyle 属性（长文解析）

HTML DOM Style outlineWidth 属性（手把手讲解）

HTML DOM Style listStyle 属性（保姆级教程）

HTML DOM Style listStyleImage 属性（保姆级教程）

HTML DOM Style listStylePosition 属性（超详细）

HTML DOM Style listStyleType 属性（长文解析）

XML DOM – 导航节点（超详细）

前言

XML DOM 的基础概念

什么是DOM？

XML节点的类型

节点导航的核心方法

节点关系与核心属性

1. 父节点（Parent Node）

2. 子节点（Child Nodes）

3. 兄弟节点（Sibling Nodes）

核心方法详解

1. 遍历子节点：firstChild 和 lastChild

2. 定位特定子节点：querySelector 和 getElementsByTagName

3. 动态创建与插入节点

实际案例：导航XML文档的实战演练

案例1：遍历书籍目录

目标：提取所有书籍的标题和作者

案例2：动态修改节点内容

进阶技巧与常见问题

技巧1：过滤空文本节点

技巧2：使用XPath简化导航

常见问题：节点不存在时的错误处理

结论

最新发布

HTML DOM Style borderTopStyle 属性（长文解析）

HTML DOM Style borderTopWidth 属性（手把手讲解）

HTML DOM Style borderWidth 属性（手把手讲解）

HTML DOM Style outline 属性（手把手讲解）

HTML DOM Style outlineStyle 属性（长文解析）

HTML DOM Style outlineWidth 属性（手把手讲解）

HTML DOM Style listStyle 属性（保姆级教程）

HTML DOM Style listStyleImage 属性（保姆级教程）

HTML DOM Style listStylePosition 属性（超详细）

HTML DOM Style listStyleType 属性（长文解析）

1. 遍历子节点：`firstChild` 和 `lastChild`

2. 定位特定子节点：`querySelector` 和 `getElementsByTagName`