本文介绍两种主流方法——CSS 选择器和 XPath 表达式，帮助开发者在解析 XML 时准确区分名称相同但语义不同的节点（如 与 ），避免数据混淆。
本文介绍两种主流方法——css 选择器和 xpath 表达式，帮助开发者在解析 xml 时准确区分名称相同但语义不同的节点（如 `
在处理结构化 XML 数据（如 ISO 20022 金融报文）时，常遇到多个同名子元素（如
✅ 推荐方案一：使用 CSS 选择器（简洁高效）
querySelector() 支持层级选择器语法（如 Parent > Child），天然适配父子关系定位，代码可读性强、性能优秀，是现代浏览器的首选方案：
const xml = `
<root>
<Dbtr>
<Nm>Debtor</Nm>
</Dbtr>
<Cdtr>
<Nm>Creditor</Nm>
</Cdtr>
</root>
`;
const doc = new DOMParser().parseFromString(xml, "application/xml");
// 精确获取 Dbtr 下的 Nm 文本
const debtorName = doc.querySelector("Dbtr > Nm")?.textContent?.trim() || "";
// 精确获取 Cdtr 下的 Nm 文本
const creditorName = doc.querySelector("Cdtr > Nm")?.textContent?.trim() || "";
console.log(debtorName); // "Debtor"
console.log(creditorName); // "Creditor"⚠️ 注意事项：
- XML 必须有且仅有一个根元素（如
），否则 DOMParser 会解析失败并返回空文档； - 建议始终对 querySelector() 结果做空值检查（使用可选链 ?. 和空值合并 ||），防止因节点缺失导致运行时错误；
- 选择器区分大小写，需严格匹配 XML 中的标签名（如 Dbtr ≠ dbtr）。
✅ 推荐方案二：使用 XPath（灵活强大）
XPath 提供更丰富的路径表达能力（如 //Dbtr/Nm、/root/Dbtr/Nm、甚至带条件的 //Nm[ancestor::Dbtr]），适合复杂查询或需要跨层级匹配的场景：
立即学习“Java免费学习笔记（深入）”；
const doc = new DOMParser().parseFromString(xml, "application/xml");
function getTextByXPath(xpath, doc) {
const result = doc.evaluate(
xpath,
doc,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
null
);
return result.singleNodeValue?.textContent?.trim() || "";
}
const debtorName = getTextByXPath("//Dbtr/Nm", doc);
const creditorName = getTextByXPath("//Cdtr/Nm", doc);
console.log(debtorName); // "Debtor"
console.log(creditorName); // "Creditor"? 小技巧：
- 使用 // 表示任意深度匹配（推荐用于不确定嵌套层级时）；
- 使用 / 表示绝对路径（需从根开始，更高效但耦合性强）；
- 若需兼容旧版 IE，XPath 需额外 polyfill，而 querySelector 在 IE9+ 即已支持。
总结
| 方案 | 优势 | 适用场景 |
|---|---|---|
| querySelector("Parent > Child") | 语法简洁、学习成本低、性能好、广泛兼容 | 大多数标准父子结构定位 |
| document.evaluate("//Parent/Child", ...) | 支持谓词、轴、函数等高级语法 | 复杂条件筛选、动态路径、多级祖先判断 |
无论选用哪种方式，核心原则不变：永远基于完整路径（而非孤立标签名）定位节点。这不仅是技术最佳实践，更是保障 XML 数据语义准确性的关键防线。
