XML DOM previousSibling 属性（建议收藏）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发和数据处理中，XML（可扩展标记语言）与 DOM（文档对象模型）的结合被广泛应用于数据交换、配置文件解析和动态内容生成等场景。其中，XML DOM previousSibling 属性作为操作节点关系的核心工具之一，能够帮助开发者高效定位和操作 XML 文档中的节点层级结构。本文将从基础概念到实战案例，深入浅出地解析这一属性的功能、应用场景及使用技巧，帮助编程初学者和中级开发者快速掌握其核心原理与实践方法。

一、XML DOM 的基础概念与节点层级关系

1.1 XML DOM 的定义与作用

XML DOM 是一种基于对象的接口，允许通过编程方式访问和操作 XML 文档的内容。它将 XML 文档解析为树状结构，每个节点（如元素、属性、文本等）都成为可操作的对象，开发者可以通过属性和方法直接修改、添加或删除这些节点。

1.2 节点的父子与兄弟关系

在 XML DOM 树中，节点之间的关系分为以下几种：

• 父子关系：元素节点与子节点之间的直接关联。例如，<book> 是 <title> 的父节点。
• 兄弟关系：同一父节点下的多个子节点互为兄弟节点。例如，<title> 和 <author> 如果共享同一父节点 <book>，则它们是兄弟节点。
• 根节点：XML 文档的最顶层节点，通常由 <root> 或具体业务定义的标签表示。

形象比喻：可以将 XML DOM 树想象成一个家族族谱，每个节点就像家族中的成员，父节点是“家长”，子节点是“子女”，而兄弟节点则是“兄弟姐妹”。

二、previousSibling 属性详解

2.1 属性定义与功能

previousSibling 是 XML DOM 节点的一个只读属性，用于获取当前节点的前一个兄弟节点。其返回值是与当前节点共享同一父节点的前一个节点对象，若当前节点没有前一个兄弟节点，则返回 null。

2.2 关键特性与注意事项

2.3 使用场景举例

• 遍历兄弟节点：例如，在遍历 XML 中的书籍列表时，逐个访问 <book> 节点的兄弟节点。
• 操作特定位置的节点：例如，根据某个节点的位置，动态修改其前一个兄弟节点的文本内容。

三、实战案例：通过 previousSibling 操作 XML 节点

3.1 案例背景

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

<library>
    <book id="1">
        <title>Effective JavaScript</title>
        <author>David Herman</author>
        <price>29.99</price>
    </book>
    <book id="2">
        <title>JavaScript: The Definitive Guide</title>
        <author>David Flanagan</author>
        <price>34.50</price>
    </book>
</library>

目标：遍历所有 <book> 节点，并为每个 <book> 的 <price> 节点前插入一个 <discount> 元素，其值为原价格的 8 折。

3.2 JavaScript 实现

// 加载 XML 文档
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlContent, "text/xml");

// 获取所有 <book> 节点
const books = xmlDoc.getElementsByTagName("book");

for (let i = 0; i < books.length; i++) {
    const book = books[i];
    const priceNode = book.querySelector("price"); // 获取当前 book 的 price 节点
    
    // 创建 <discount> 节点
    const discountNode = xmlDoc.createElement("discount");
    discountNode.textContent = (parseFloat(priceNode.textContent) * 0.8).toFixed(2);
    
    // 插入到 price 节点的前面
    if (priceNode.previousSibling) {
        book.insertBefore(discountNode, priceNode.previousSibling.nextSibling); // 或直接使用 priceNode.parentNode.insertBefore(discountNode, priceNode)
    } else {
        book.insertBefore(discountNode, priceNode);
    }
}

// 输出修改后的 XML
console.log(xmlDoc.documentElement.outerHTML);

关键步骤说明：

1. 使用 DOMParser 解析 XML 字符串。
2. 通过 getElementsByTagName 获取所有 <book> 节点。
3. 遍历每个 <book> 节点，定位其 <price> 子节点。
4. 创建 <discount> 节点，并计算折扣值。
5. 使用 insertBefore 方法将新节点插入到 <price> 的 前一个兄弟节点之后，或直接作为 <price> 的前驱节点。

四、进阶技巧与常见问题解答

4.1 处理空节点或非元素节点

由于 previousSibling 可能返回文本节点（如换行符或空格），需在操作前进行类型判断：

const targetNode = priceNode.previousSibling;
if (targetNode.nodeType === Node.ELEMENT_NODE) {
    // 执行操作
}

4.2 结合 nextSibling 实现双向遍历

通过 previousSibling 和 nextSibling 属性，可以实现对兄弟节点的双向遍历：

let currentNode = firstBookNode; // 假设已定义第一个 <book> 节点
while (currentNode) {
    console.log(currentNode.nodeName);
    currentNode = currentNode.nextSibling; // 向后遍历
}

4.3 常见错误与解决方案

• 错误：尝试操作 null 节点时抛出异常。
• 解决：在访问 previousSibling 之前，始终检查其是否为 null。

五、与相关属性的协同使用

5.1 previousSibling vs parentNode

当需要同时操作节点的父级和兄弟节点时，可以结合 parentNode 和 previousSibling：

// 获取当前节点的前一个兄弟节点的父节点
const parentOfPrevious = priceNode.previousSibling?.parentNode;

5.2 结合 XPath 定位节点

通过 XPath 表达式结合 previousSibling，可以实现更复杂的查询：

const xpathResult = xmlDoc.evaluate(
    "//price/preceding-sibling::*[1]",
    xmlDoc,
    null,
    XPathResult.ANY_TYPE,
    null
);
const firstPrevious = xpathResult.iterateNext();

六、总结与实践建议

XML DOM previousSibling 属性 是操作节点层级关系的重要工具，尤其在需要动态修改 XML 结构或遍历兄弟节点时发挥关键作用。通过本文的案例和代码示例，读者可以掌握以下核心能力：

1. 理解 XML DOM 树的节点层级关系。
2. 使用 previousSibling 定位和操作前驱节点。
3. 结合其他属性（如 nextSibling、parentNode）实现复杂场景的节点操作。

实践建议：

• 尝试将本文案例中的 <discount> 插入逻辑改为动态计算其他属性（如税率或运费）。
• 使用真实的 XML 配置文件，练习通过 previousSibling 实现节点的增删改操作。

掌握这一属性后，开发者可以更高效地处理 XML 数据，为构建动态 Web 应用或数据解析工具奠定坚实基础。