XML DOM – Text 对象（长文讲解）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 文档的标准接口，为开发者提供了灵活的节点操作能力。其中，Text 对象作为 DOM 核心中最基础但至关重要的元素，直接决定了开发者如何高效地解析、修改和生成 XML 文档中的文本内容。

对于编程初学者而言，DOM 可能是一个抽象且难以捉摸的概念。想象一下，XML 文档就像一座由标签和文本构建的“图书馆”，而 DOM 则是这座图书馆的“导航系统”。Text 对象正是这个导航系统中指向具体书页内容的“指针”。通过掌握 Text 对象的属性和方法，开发者可以精准地定位、读取或修改 XML 文档中的文本信息。

本文将从零开始，通过循序渐进的讲解和代码示例，帮助读者全面理解 XML DOM – Text 对象的核心知识，并通过实际案例演示其应用场景。

一、XML DOM 的基础概念：构建操作 XML 的框架

1.1 什么是 XML？

XML（eXtensible Markup Language）是一种用于标记电子文件的语言，它允许用户自定义标签，以结构化的方式组织数据。例如，一个描述书籍信息的 XML 可能如下：

<book>
  <title>Effective JavaScript</title>
  <author>Douglas Crockford</author>
  <price>29.99</price>
</book>

这里的 <title>、<author> 是标签，而标签内的文本（如“Effective JavaScript”）则是 XML 节点中的 文本内容。

1.2 DOM：XML 的树形结构模型

DOM 将 XML 文档解析为一棵树形结构，每个节点（Node）代表文档中的一个元素、属性或文本。例如，上述 XML 的 DOM 树结构如下：

book（元素节点）  
├─ title（元素节点）  
│  └─ "Effective JavaScript"（文本节点）  
├─ author（元素节点）  
│  └─ "Douglas Crockford"（文本节点）  
└─ price（元素节点）  
   └─ "29.99"（文本节点）  

Text 对象正是 DOM 树中表示文本节点的实例，它存储了标签内的纯文本内容。

二、Text 对象的核心属性与方法

2.1 Text 对象的属性

2.1.1 nodeType 和 nodeName

每个 DOM 节点都有 nodeType 和 nodeName 属性，用于标识节点类型和名称。对于 Text 对象：

• nodeType 的值为 3（常量 Node.TEXT_NODE）。
• nodeName 的值固定为 #text。

2.1.2 nodeValue 和 textContent

• nodeValue：直接返回或设置文本节点的值。例如：

  // 假设 textNode 是某个 Text 对象
  console.log(textNode.nodeValue); // 输出："Effective JavaScript"
  textNode.nodeValue = "你修改后的文本";
  

• textContent：与 nodeValue 功能类似，但更易用。它不仅适用于文本节点，还能获取元素节点下所有后代文本的合并结果。例如：

  const titleElement = document.querySelector("title");
  console.log(titleElement.textContent); // 输出："Effective JavaScript"
  

2.1.3 数据属性：data 和 length

• data：等同于 nodeValue，用于直接操作文本内容。
• length：返回文本节点的字符长度。

2.2 Text 对象的核心方法

2.2.1 splitText()：分割文本节点

splitText(offset) 方法允许开发者在指定位置将一个文本节点拆分为两个节点。例如：

const textNode = document.createTextNode("Hello World!");
const newTextNode = textNode.splitText(5); // 在索引5（"Hello"后）分割

console.log(textNode.textContent); // 输出："Hello"
console.log(newTextNode.textContent); // 输出：" World!"

比喻：这就像用剪刀将一段文字剪成两部分，每部分都成为独立的文本节点。

2.2.2 其他继承方法

Text 对象继承自 CharacterData 和 Node 类，因此还支持以下方法：

• appendData(): 追加文本内容。
• deleteData(): 删除指定范围的文本。
• insertData(): 在指定位置插入文本。
• replaceData(): 替换指定范围的文本。

三、实战案例：操作 XML 文档中的 Text 对象

3.1 案例背景

假设我们有一个 XML 文档 books.xml，内容如下：

<library>
  <book category="tech">
    <title>JavaScript: The Definitive Guide</title>
    <author>David Flanagan</author>
    <price>39.99</price>
  </book>
  <book category="fiction">
    <title>The Great Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <price>12.99</price>
  </book>
</library>

我们的目标是：

1. 读取所有书籍的标题文本。
2. 将价格低于 20 美元的书籍标题改为红色文本。

3.2 步骤 1：解析 XML 文档并定位节点

首先，使用 JavaScript 的 DOMParser 解析 XML：

const xmlString = `...`; // XML 内容字符串
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

然后，获取所有 <book> 元素：

const books = xmlDoc.querySelectorAll("book");

3.3 步骤 2：操作 Text 对象

3.3.1 读取标题文本

遍历每个 <book> 节点，访问其 <title> 子节点的文本内容：

books.forEach(book => {
  const titleNode = book.querySelector("title");
  console.log(titleNode.textContent); // 输出各个书名
});

3.3.2 条件修改文本样式

通过判断 <price> 的值，修改对应 <title> 的样式：

books.forEach(book => {
  const priceNode = book.querySelector("price");
  const price = parseFloat(priceNode.textContent);
  
  if (price < 20) {
    const titleNode = book.querySelector("title");
    // 通过父节点操作样式（Text 对象本身不支持样式）
    titleNode.parentNode.style.color = "red";
  }
});

注意：Text 对象本身不直接支持样式修改，需通过其父元素（如 <title> 元素）设置样式。

四、进阶技巧与常见问题

4.1 合并相邻的 Text 节点

XML 文档中可能存在多个相邻的 Text 节点，例如：

<paragraph>
  This is a text node.
  This is another text node.
</paragraph>

此时，paragraph.childNodes 可能包含两个 Text 节点。若需合并为一个，可用 Node.normalize() 方法：

const paragraph = xmlDoc.querySelector("paragraph");
paragraph.normalize(); // 合并相邻 Text 节点

4.2 处理特殊字符

XML 对特殊字符（如 <、>）有严格限制，需使用实体编码（如 <）。若直接通过 Text 对象写入未经编码的文本，可能导致解析错误。建议使用 DOMParser 或 XMLSerializer 自动处理编码：

const unsafeText = "This is a <test> string!";
const safeTextNode = xmlDoc.createTextNode(unsafeText);
// 内部会自动转换为 "This is a &lt;test&gt; string!"

4.3 性能优化建议

频繁修改 Text 节点内容可能导致性能问题，尤其在处理大型 XML 文档时。建议：

1. 尽量批量操作，减少 DOM 操作次数。
2. 使用 splitText() 替代多次 appendData() 或 deleteData()。

五、与 XML DOM 其他对象的协作

5.1 Text 对象与元素节点的关系

每个 Text 对象都隶属于一个父元素节点。例如，<title> 元素的 firstChild 即为其 Text 子节点：

const titleElement = xmlDoc.querySelector("title");
const textNode = titleElement.firstChild; // 或 titleElement.childNodes[0]

5.2 Text 对象与属性节点的区别

XML 中的属性（如 <book category="tech"> 的 category）存储在 Attr 对象中，而非 Text 对象。访问属性值需通过 getAttribute() 或 attributes 集合：

const categoryAttr = book.getAttributeNode("category");
console.log(categoryAttr.value); // 输出："tech"

六、总结：掌握 Text 对象的关键价值

通过本文的讲解，读者应已理解 XML DOM – Text 对象的核心功能：

• 它是 DOM 树中存储文本内容的容器，支持直接读写操作。
• 通过 splitText()、textContent 等方法，开发者可以灵活地分割、合并或修改文本。
• 在实际应用中，需结合其他 DOM 方法（如元素遍历、条件判断）实现复杂操作。

对于编程初学者，建议通过以下步骤逐步实践：

1. 从简单的 XML 解析开始，熟悉 DOM 节点遍历。
2. 使用 Text 对象的 textContent 属性完成基础文本读取。
3. 逐步尝试 splitText() 等高级方法，并结合条件逻辑实现动态操作。

掌握 Text 对象不仅是操作 XML 的基础，更是深入理解 DOM 核心机制的重要一环。随着对这一对象的熟练运用，开发者将能够更高效地处理数据解析、文档生成等任务，为构建复杂的 XML 应用打下坚实基础。