JS怎么遍历XML节点 JavaScript XML DOM遍历方法

幻夢星雲 2026-01-22 00:00:00 次阅读

JavaScript遍历XML节点需先用DOMParser解析字符串为Document对象，再通过children、getElementsByTagName或querySelectorAll等API安全访问元素节点，避开文本节点干扰，并可递归遍历全部元素。

JavaScript 中遍历 XML 节点主要依靠原生 XML DOM API，核心是把 XML 字符串解析为 Document 对象，再用类似 HTML DOM 的方式（如 childNodes、getElementsByTagName、querySelector 等）访问和遍历节点。关键在于正确解析、识别节点类型、避开文本节点干扰。

解析 XML 字符串为 DOM 文档

浏览器中不能直接用 new DOMParser() 解析不规范的 XML（比如含 BOM、编码错误或自闭合标签写法不当），需确保字符串格式合法：

使用 DOMParser 解析（现代浏览器支持）：
```
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, "application/xml");
```
解析失败时，xmlDoc.querySelector("parsererror") 会存在，可据此判断是否出错。
IE8/9 需用 ActiveXObject("Microsoft.XMLDOM")（已过时，仅作兼容参考）。

区分节点类型，安全遍历 childNodes

childNodes 包含元素节点、文本节点（换行缩进）、注释节点等。直接遍历易报错或跳过目标节点：

只处理元素节点（nodeType === 1）：

for (let node of parent.childNodes) {
  if (node.nodeType === 1) { /* 处理元素 */ }
}

更简洁：用 children（只返回元素子节点，忽略文本/注释）：
for (let elem of parent.children) { /* elem 是 Element 类型 */ }

按标签名或属性快速定位并遍历

比递归遍历更高效，适合有明确结构的 XML：

获取所有同名元素：

const items = xmlDoc.getElementsByTagName("item");
Array.from(items).forEach(item => { /* 处理每个 item 元素 */ });

用 querySelectorAll 支持 CSS 选择器：

const titles = xmlDoc.querySelectorAll("book title");
titles.forEach(el => console.log(el.textContent));

读取属性值：

const id = item.getAttribute("id");
// 或 el.attributes["id"]?.value

递归遍历全部元素节点（深度优先）

适合结构未知或需统一处理所有元素的场景：

简单递归函数示例：

function walkElements(node) {
  if (node.nodeType !== 1) return;
  console.log(node.tagName, node.textContent.trim());
  for (let child of node.children) {
    walkElements(child);
  }
}
walkElements(xmlDoc.documentElement);