如何在JS中解析XML数据以及序列化

背景

最近工作中发现一些接口居然还在使用XML格式传递数据,用于一个表单数据。我需要先完成如下步骤:

  1. 解析xml获得数据后显示在表单中;
  2. 用户编辑后,调用接口前,还得转为xml格式;
  3. 将上述的XML数据转为字符串,返回给后端;

无奈后端大大不愿帮我转JSON,只能自己上手,偶然发现原生就解析的API,下面是简单的使用介绍。

解析XML

介绍一个JS原生的API-DOMParser。 简单的说DOMParser是一个类,通过new关键字调用后,返回一个parser。后续的解析工作由这个parser完成:

js 复制代码
const xmlStr = '<AAAA id="a" name="AAA"><BBB id="b">hey!</BBB></AAAA>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");

写到这里大家脑海中可能会有一个疑问-怎么获取XML的数据呢?要解决这一个问题,需要先看看parseFromString返回是什么呢?

答案是一颗DOM树。如下图所示:

这里请允许我吐槽一下这个API的设计:new DOMParser -> parser -> parser.parseFromString,需要经过这么多步才能完成解析。。。

这是不是意味着我们可以通过熟悉的API去获取值了呢?下面简单尝试一下:

查询querySelector

注意:querySelector方法需要在parseFromString返回的DOM上调用,才能查到节点。

获取属性 getAttribute

就目前为止,DOM相关的API基本都能使用。如此就能根据实际需要将这颗DOM树转化为普通的JS对象了。本人实力有限,怕误导大家,就不贴代码了。

创建一颗XML版的DOM树

上面提到parser返回的是一颗,那么是不是用传统创建Element元素的API就行了呢?

经过实际检验发现HTML会忽略大小写。

OS:当初写到这步的时候,我的心是拔凉拔凉的。以为自己好不容易发现的新大陆,其实是一个死胡同。但是我突然灵光一现,意识到了一个问题

大家还记上面调用查询API的时候,是没有使用全局的document的。那么在这里我重新创建一个document对象,并通过它创建大写开头的标签是否可行呢?

惊不惊喜,意不意外。那这是为什么呢?

这个问题我们可以通过 document.contentType 来简单解答一下

MDN的解释:返回当前文档的 Content-Type(MIME) 类型。

具体原因后续如果我能找到,咱们再聊聊。

现在我们还需要把处理属性值和子节点

到目前为止,我们就剩最后一步-将xml树转化为字符串 这里介绍第二个API-XMLSerializer,具体使用见下面:

总结

本篇文章主要从我在工作中遇到的一个小问题-解析并序列化XML数据开启,简单分享了一下如何使用原生API,自由的处理xml数据。虽然现在有许多第三方库可以很方便的帮助我们解决上述问题,但是在面对一些需要特殊处理的情况时,相比于修改三方库代码,可能我分享的这种方式更容易实现。

相关推荐
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
一只小风华~3 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱3 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.4 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
每天吃饭的羊5 小时前
state和ref
前端·javascript·react.js
GEO_YScsn5 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing5 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠5 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
GISer_Jing5 小时前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin5 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试