XSL教程：XML转HTML与客户端JS实现详解

山间有风

发布时间：2026-10-16| 7人浏览过

原创

XSL是XML的首选样式语言，不仅用于格式化，更核心的是将XML文档转换为HTML。本文介绍如何利用XSL模板将XML数据渲染为表格，并详解在JavaScript中通过Microsoft.XMLDOM对象在客户端执行转换的代码实现方案。

结果或目标

本教程旨在解决XML数据在浏览器中无法直接美观展示的问题。通过将XML文件关联XSL样式表，或利用JavaScript在客户端进行实时转换，可以将结构化的XML数据（如商品目录、音乐列表）转换为浏览器可识别的HTML格式（如表格、列表）。

准备条件

源数据文件：一个标准的XML文件，例如 cd_catalog.xml。
样式表文件：一个XSL文件，定义转换规则，例如 cd_catalog.xsl。
运行环境：支持XML解析的浏览器（传统IE5+环境示例）或支持JavaScript的Web环境。

真实操作顺序

第一步：编写XML源数据文件

首先创建包含数据的XML文件。以下是一个简单的CD目录示例，注意XML声明部分指定了版本和编码：

<?xml version="1.0" encoding="ISO8859-1" ?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
</CATALOG>

第二步：定义XSL转换模板

创建 .xsl 文件。XSL本质上也是XML文档，需包含 xsl:stylesheet 命名空间声明。核心逻辑包括：
- <xsl:template match="/">：匹配根节点，定义输出的HTML结构。
- <xsl:for-each select="CATALOG/CD">：遍历所有CD节点。
- <xsl:value-of select="TITLE"/>：提取并插入当前节点的标题值。

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
  <html>
  <body>
    <table border="2" bgcolor="yellow">
      <tr>
        <th>Title</th>
        <th>Artist</th>
      </tr>
      <xsl:for-each select="CATALOG/CD">
        <tr>
          <td><xsl:value-of select="TITLE"/></td>
          <td><xsl:value-of select="ARTIST"/></td>
        </tr>
      </xsl:for-each>
    </table>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>

第三步：在XML中关联样式表（浏览器原生方式）

若浏览器支持XSL处理（如旧版IE），只需在XML文件头添加指令即可自动转换显示：

<?xml version="1.0" encoding="ISO8859-1" ?>
<?xml-stylesheet type="text/xsl" href="cd_catalog.xsl"?>
<CATALOG>
... (后续同第一步) 
</CATALOG>

第四步：使用JavaScript在客户端执行转换

为了兼容性或在非标准XML环境中操作，可以使用JavaScript加载XML和XSL对象并手动触发转换。适用于旧版Internet Explorer（ActiveX对象）：

<script language="javascript">
// 1. 加载XML文件
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("cd_catalog.xml");

// 2. 加载XSL文件
var xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("cd_catalog.xsl");

// 3. 执行转换并输出到HTML页面
document.write(xml.transformNode(xsl));
</script>

关键点说明： - xml.async = false：确保文档完全加载后再进行下一步操作。 - transformNode()：这是XML DOM提供的内置方法，接受XSL对象作为参数，返回转换后的HTML字符串。

完成判断

当您在浏览器中打开包含上述脚本的HTML文件时，如果控制台无报错且页面以黄色背景表格形式展示了CD标题和艺术家信息，即表示XML已成功转换为HTML。若使用原生关联方式，直接打开XML文件即可查看格式化效果。

原文有依据的排错

浏览器兼容性：现代主流浏览器已不再默认支持IE的 Microsoft.XMLDOM 或早期的W3C WD-xsl标准。在现代开发中，通常推荐使用 DOMParser 结合 XSLTProcessor API来实现跨浏览器的XML到HTML转换，而非依赖ActiveX对象。
编码问题：确保XML、XSL和HTML文件的编码声明一致（如UTF-8或ISO8859-1），否则可能出现乱码。