当前位置:首页 > JavaScript

js实现xml输出

2026-03-16 00:55:03JavaScript

使用 DOM API 生成 XML

在 JavaScript 中可以通过 DOM API 创建 XML 文档对象并构建节点结构。document.implementation.createDocument() 方法用于创建空 XML 文档:

const xmlDoc = document.implementation.createDocument(null, '', null);
const root = xmlDoc.createElement('root');
xmlDoc.appendChild(root);

const item = xmlDoc.createElement('item');
item.setAttribute('id', '1');
item.textContent = 'Example content';
root.appendChild(item);

const xmlString = new XMLSerializer().serializeToString(xmlDoc);
console.log(xmlString);

输出结果:

<root><item id="1">Example content</item></root>

使用字符串拼接生成 XML

对于简单 XML 结构,可以直接拼接字符串模板:

const data = { id: 1, name: 'Test' };
const xmlString = `
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <item id="${data.id}">${data.name}</item>
</root>
`.trim();

console.log(xmlString);

输出结果:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <item id="1">Test</item>
</root>

使用第三方库生成 XML

xml-js 库可以将 JavaScript 对象转换为 XML:

const { js2xml } = require('xml-js');
const obj = {
  _declaration: { _attributes: { version: '1.0', encoding: 'UTF-8' } },
  root: {
    item: [
      { _attributes: { id: 1 }, _text: 'First' },
      { _attributes: { id: 2 }, _text: 'Second' }
    ]
  }
};

const xmlString = js2xml(obj, { compact: true, spaces: 2 });
console.log(xmlString);

输出结果:

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <item id="1">First</item>
  <item id="2">Second</item>
</root>

浏览器环境下的 XML 处理

现代浏览器支持 DOMParserXMLSerializer

js实现xml输出

// 解析 XML 字符串
const parser = new DOMParser();
const xmlDoc = parser.parseFromString('<root><item>test</item></root>', 'text/xml');

// 修改 XML
const newItem = xmlDoc.createElement('item');
newItem.textContent = 'new content';
xmlDoc.querySelector('root').appendChild(newItem);

// 序列化为字符串
const serializer = new XMLSerializer();
const updatedXml = serializer.serializeToString(xmlDoc);

注意事项

  • 包含特殊字符时需要转义(如 < 转义为 &lt;
  • 添加 XML 声明时需指定正确编码
  • 复杂嵌套结构建议使用 DOM API 或第三方库
  • 服务器端 Node.js 环境需使用 xmldom 等兼容库替代浏览器 API

标签: jsxml
分享给朋友:

相关文章

js实现文件下载

js实现文件下载

使用 a 标签下载文件 通过动态创建 a 标签并设置 download 属性实现文件下载。适用于已知文件 URL 或 Blob 数据的情况。 function downloadFile(url, f…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现图片

js实现图片

图片加载与显示 在JavaScript中,可以通过Image对象动态加载图片。创建实例后设置src属性触发加载,通过onload回调处理加载完成后的操作: const img = new Ima…

js实现图片放大

js实现图片放大

使用 CSS transform 实现图片放大 通过 CSS 的 transform: scale() 属性实现图片放大效果。当鼠标悬停时,图片会平滑放大。 const img = document…