如何使用Fetch API获取经XSLT转换的XML内容并插入DOM

问题核心原因 #

你当前的代码仅将XML文件内容作为纯文本解析后直接插入DOM，没有触发关联的XSLT样式表转换，因此输出的是原始XML内容。你可以使用浏览器原生的XSLTProcessor接口完成转换，无需引入第三方依赖，也不需要用到你提到的已废弃/不符合需求的特性。

调整后可运行的代码 #

// 同时加载XML和XSLT文件
Promise.all([
  fetch('ref.xml').then(res => res.text()),
  fetch('trans.xsl').then(res => res.text())
]).then(([xmlStr, xslStr]) => {
  const parser = new DOMParser();
  // 分别解析XML和XSLT为DOM文档
  const xmlDoc = parser.parseFromString(xmlStr, "text/xml");
  const xslDoc = parser.parseFromString(xslStr, "text/xml");

  // 初始化XSLT转换器
  const xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xslDoc);
  // 执行转换得到HTML文档片段
  const resultDoc = xsltProcessor.transformToFragment(xmlDoc, document);

  // 插入到目标节点
  const app = document.getElementById("content");
  app.innerHTML = '';
  app.appendChild(resultDoc);
}).catch(err => {
  console.error('转换出错：', err);
});

代码逻辑说明 #

1. 用Promise.all并行加载XML和XSLT文件，减少请求等待时间
2. 用DOMParser将两个文件的文本内容解析为浏览器可识别的XML DOM对象
3. 通过原生XSLTProcessor导入样式表、执行转换，直接生成可插入当前页面的DOM片段
4. 插入到目标节点后，生成的元素完全继承当前页面的CSS规则，也可以直接通过JS访问内部的所有标签节点，完全符合你的需求。

注意事项 #

• 请在本地/线上HTTP服务环境下运行代码，直接打开本地HTML文件会触发跨域限制导致fetch失败
• 如果希望自动提取XML中关联的XSLT地址，不需要硬编码trans.xsl路径，可以在解析XML后读取xml-stylesheet处理指令的href属性动态加载即可。

内容的提问来源于stack exchange，提问作者leonard vertighel