如何在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数据。虽然现在有许多第三方库可以很方便的帮助我们解决上述问题,但是在面对一些需要特殊处理的情况时,相比于修改三方库代码,可能我分享的这种方式更容易实现。

相关推荐
coding随想34 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB242 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子10 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录11 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20911 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode11 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript