JS怎么遍历XML节点 JavaScript XML DOM遍历方法_网络技术

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);

注意：避免对 textContent 直接全量取值——深层嵌套时可能包含大量空白或无关文本，建议用 node.innerText（部分浏览器支持）或针对性取子元素内容。

# css # javascript # java # html # js # node # 编码 # 浏览器 # app # microsoft # 递归函数

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：sublime如何配置Nginx配置文件高亮_sublime

下一篇：ao3官方网站镜像链接入口_ao3官网入口链接镜像

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：sublime如何配置Nginx配置文件高亮_sublime

下一篇：ao3官方网站镜像链接入口_ao3官网入口链接镜像