首页
/ 正文

XML DOM 实例（千字长文）

更新时间: 2025-04-07 22:57:58

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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（文档对象模型）的结合，为数据的存储、解析和操作提供了强大的工具。无论是构建配置文件、处理 Web 服务响应，还是开发需要灵活数据交互的应用程序，掌握 XML DOM 实例 的核心原理和操作方法都至关重要。本文将从基础概念入手，通过分步讲解、代码示例和实际案例，帮助编程初学者和中级开发者系统性地理解这一技术栈，并快速上手实践。

XML 的基础概念与文档结构

什么是 XML？

XML 是一种用于描述结构化数据的语言，其核心特点是通过自定义标签（元素）来组织信息。例如，一个图书信息的 XML 可能如下所示：

<bookstore>
  <book category="fiction">
    <title>1984</title>
    <author>George Orwell</author>
    <price>9.99</price>
  </book>
  <book category="non-fiction">
    <title>Sapiens</title>
    <author>Yuval Noah Harari</author>
    <price>14.99</price>
  </book>
</bookstore>

关键术语解释：

元素（Element）：如 <book> 和 <title>，通过标签名定义数据类型。
属性（Attribute）：如 category="fiction"，附加在元素上的元数据。
文本节点（Text Node）：元素内的纯文本内容，如 <title>1984</title> 中的 "1984"。

XML 的核心特性

可扩展性：开发者可自定义标签，适应特定业务需求。
跨平台兼容性：XML 是纯文本格式，可在不同系统间无缝传递。
结构化数据：通过层级关系清晰表达数据间的关联。

DOM 的核心概念与操作逻辑

什么是 DOM？

DOM（Document Object Model）是将 XML 或 HTML 文档解析为内存中的树状对象结构。每个节点（如元素、文本、属性）都成为可编程操作的对象，允许开发者通过代码动态修改文档内容。

DOM 树的比喻：
想象一棵树，根节点（document）是树干，子节点（如 <bookstore>）是树枝，叶子节点（如 <title>）是树叶。通过遍历和操作节点，可以像修剪树枝一样修改文档结构。

DOM 的核心节点类型

DOM 中的节点类型包括：
| 类型 | 描述 | |--------------|----------------------------------------------------------------------| | Element | 表示 XML/HTML 元素，如 <book>。 | | Text | 存储节点内的文本内容，如 <title> 中的 "1984"。 | | Attribute | 元素的属性，如 category="fiction"。 | | Document | 根节点，代表整个 XML/HTML 文档。 | | Comment | 注释节点，用于添加说明性内容。 |

XML DOM 的操作步骤与代码实例

步骤 1：加载 XML 文档

在 JavaScript 中，可通过 DOMParser 解析 XML 字符串：

const xmlString = `
<bookstore>
  <book category="fiction">
    <title>1984</title>
    <author>George Orwell</author>
    <price>9.99</price>
  </book>
</bookstore>
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

关键点：

DOMParser 是浏览器内置对象，用于将 XML 字符串转换为 DOM 树。
parseFromString 方法返回根节点（document）。

步骤 2：遍历与查询节点

通过 getElementsByTagName 或 querySelector 定位元素：

// 获取所有 <book> 元素
const books = xmlDoc.getElementsByTagName("book");
for (let i = 0; i < books.length; i++) {
  console.log(books[i].querySelector("title").textContent); // 输出 "1984"
}

比喻：
getElementsByTagName 好比在树上“搜索所有标签为‘book’的树枝”，而 querySelector 则像沿着树枝向下寻找特定叶子（如 title）。

步骤 3：修改与新增节点

通过 createElement 和 appendChild 动态更新文档：

// 新增一个 <book> 元素
const newBook = xmlDoc.createElement("book");
newBook.setAttribute("category", "sci-fi");

const titleNode = xmlDoc.createElement("title");
titleNode.textContent = "Dune";
newBook.appendChild(titleNode);

xmlDoc.documentElement.appendChild(newBook); // 将新元素添加到根节点

关键点：

createElement 创建新节点，setAttribute 设置属性。
appendChild 将节点插入父节点的末尾。

实战案例：解析图书信息并生成 HTML

案例背景

假设需要从 XML 数据中提取图书信息，并动态生成 HTML 表格展示。

XML 数据：

<library>
  <book id="1">
    <title>Foundation</title>
    <author>Isaac Asimov</author>
    <year>1951</year>
  </book>
  <book id="2">
    <title>Neuromancer</title>
    <author>William Gibson</author>
    <year>1984</year>
  </book>
</library>

实现步骤与代码

加载 XML 并查询所有书籍：

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const books = xmlDoc.querySelectorAll("book"); // 使用 CSS 选择器语法

遍历书籍并生成 HTML 行：

const tableBody = document.querySelector("#book-table tbody");
books.forEach(book => {
  const row = document.createElement("tr");
  
  // 提取数据
  const title = book.querySelector("title").textContent;
  const author = book.querySelector("author").textContent;
  const year = book.getAttribute("id"); // 通过属性获取 id

  // 创建表格单元格
  const cells = [title, author, year].map(text => {
    const cell = document.createElement("td");
    cell.textContent = text;
    return cell;
  });

  // 将单元格添加到行中
  cells.forEach(cell => row.appendChild(cell));
  tableBody.appendChild(row);
});

输出结果：
| Title | Author | Year | |-------------|--------------------|------| | Foundation | Isaac Asimov | 1951 | | Neuromancer | William Gibson | 1984 |

高级技巧：处理复杂场景与性能优化

技巧 1：处理命名空间

当 XML 包含命名空间时（如 SOAP 或 RSS），需通过 lookupNamespaceURI 确保正确解析：

const ns = xmlDoc.lookupNamespaceURI("soap"); // 获取命名空间 URI
const elements = xmlDoc.querySelectorAll(`*[xmlns="${ns}"]`); // 使用命名空间过滤元素

技巧 2：动态 XML 生成与序列化

通过 XMLSerializer 将修改后的 DOM 转换为字符串：

const serializer = new XMLSerializer();
const updatedXml = serializer.serializeToString(xmlDoc);

技巧 3：性能优化

对于大规模 XML 文档，避免频繁操作 DOM 树。可先缓存节点集合或使用事件监听减少重复查询：

// 使用 WeakMap 缓存节点
const nodeCache = new WeakMap();
function getElementById(id) {
  if (!nodeCache.has(id)) {
    nodeCache.set(id, xmlDoc.getElementById(id));
  }
  return nodeCache.get(id);
}

结论

XML DOM 实例 是连接结构化数据与动态编程的核心桥梁。通过掌握节点操作、遍历技巧和高级策略，开发者可以高效地解析、修改和生成 XML 文档，从而应对配置管理、数据交换、Web 服务集成等场景。本文通过代码示例和案例，展示了从基础到实战的完整路径，建议读者通过实际项目不断练习，例如构建一个基于 XML 的 RSS 阅读器或配置文件编辑器，以巩固对这一技术栈的理解。

掌握 XML DOM 实例 的核心逻辑后，开发者将能更灵活地处理复杂数据流，并为构建跨平台、可扩展的应用程序奠定坚实基础。

XML DOM 实例（千字长文）

XML 的基础概念与文档结构

什么是 XML？

XML 的核心特性

DOM 的核心概念与操作逻辑

什么是 DOM？

DOM 的核心节点类型

XML DOM 的操作步骤与代码实例

步骤 1：加载 XML 文档

步骤 2：遍历与查询节点

步骤 3：修改与新增节点

实战案例：解析图书信息并生成 HTML

案例背景

实现步骤与代码

高级技巧：处理复杂场景与性能优化

技巧 1：处理命名空间

技巧 2：动态 XML 生成与序列化

技巧 3：性能优化

结论

最新发布

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

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

HTML DOM Style right 属性（长文讲解）

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

HTML DOM Style verticalAlign 属性（建议收藏）

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

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

HTML DOM Style zIndex 属性（长文讲解）

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

HTML DOM Style pageBreakAfter 属性（长文讲解）