轻松掌握XML DOM与JSON转换技巧，高效处理数据格式切换挑战

在处理数据时，经常会遇到XML和JSON这两种数据格式之间的转换。XML（eXtensible Markup Language）和JSON（JavaScript Object Notation）都是用于数据交换的格式，但它们在结构和用途上有所不同。XML是一种基于文本的标记语言，而JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。本文将详细介绍如何轻松掌握XML DOM与JSON之间的转换技巧，以高效处理数据格式切换挑战。

1. XML DOM 简介

XML DOM（Document Object Model）是一种用于访问和操作XML文档的编程接口。它允许你以树形结构访问XML文档中的元素和属性，并对其进行修改。

1.1 XML DOM 树结构

XML DOM树由节点组成，包括元素节点、属性节点、文本节点等。以下是一个简单的XML DOM树结构示例：

<root> <element1 attribute1="value1"> <element2 attribute2="value2">Text content</element2> </element1> </root>

1.2 创建 XML DOM 树

在JavaScript中，可以使用DOMParser对象来解析XML字符串，并创建一个XML DOM树。

const parser = new DOMParser(); const xmlString = '<root><element>Text</element></root>'; const xmlDoc = parser.parseFromString(xmlString, "text/xml");

2. JSON 简介

JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON格式通常用于Web应用程序中的数据交换。

2.1 JSON 数据结构

JSON数据结构由键值对组成，可以是对象或数组。以下是一个简单的JSON对象示例：

{ "name": "John", "age": 30, "cars": [ {"name": "Ford", "models": ["Fiesta", "Focus", "Mustang"]}, {"name": "BMW", "models": ["320", "X3", "X5"]} ] }

2.2 创建 JSON 对象

在JavaScript中，可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。

const obj = { "name": "John", "age": 30 }; const jsonString = JSON.stringify(obj);

3. XML DOM 与 JSON 转换技巧

3.1 XML DOM 转换为 JSON

要将XML DOM树转换为JSON对象，可以遍历XML DOM树，并逐个节点地构建JSON对象。

function xmlToJson(xmlDoc) { const obj = {}; const xmlChildren = xmlDoc.documentElement.childNodes; xmlChildren.forEach(child => { const jsonChild = { [child.nodeName]: child.textContent }; if (child.hasAttributes()) { const attributes = child.attributes; jsonChild.$attributes = {}; attributes.forEach(attr => { jsonChild.$attributes[attr.name] = attr.value; }); } if (obj[child.nodeName]) { if (!Array.isArray(obj[child.nodeName])) { obj[child.nodeName] = [obj[child.nodeName]]; } obj[child.nodeName].push(jsonChild); } else { obj[child.nodeName] = jsonChild; } }); return obj; } const xmlDoc = ...; // XML DOM 树 const json = xmlToJson(xmlDoc);

3.2 JSON 转换为 XML DOM

要将JSON对象转换为XML DOM树，可以遍历JSON对象，并逐个节点地构建XML DOM树。

function jsonToXml(jsonObj) { const xmlDoc = document.createElement("root"); for (const key in jsonObj) { const element = document.createElement(key); if (jsonObj[key].$attributes) { for (const attrKey in jsonObj[key].$attributes) { const attribute = document.createAttribute(attrKey); attribute.value = jsonObj[key].$attributes[attrKey]; element.setAttributeNode(attribute); } } if (Array.isArray(jsonObj[key])) { jsonObj[key].forEach(child => { const childElement = jsonToXml(child); element.appendChild(childElement); }); } else { element.textContent = jsonObj[key]; } xmlDoc.appendChild(element); } return xmlDoc; } const jsonObj = ...; // JSON 对象 const xmlDoc = jsonToXml(jsonObj);