XML作为一门通用的数据描述语言，在配置文件、数据交换和文档存储等场景中有着广泛的应用。但XML标签是自定义的，浏览器无法直接决定如何渲染这些标签。XSLT（Extensible Stylesheet Language Transformations）的出现解决了这个难题——它允许开发者编写样式表，将XML文档转换成HTML页面、纯文本或者其他XML结构。简单来说，XSLT充当了数据与展示层之间的桥梁，让结构化的XML数据能够以符合人类阅读习惯的形式呈现出来。
XSLT与XML的关系：从数据到呈现
XML文档本质上是一棵由节点组成的树，节点类型包括元素节点、属性节点、文本节点、注释节点等。XSLT样式表则是一组模板规则的集合，每条模板规则声明了当遇到某种节点时应该输出什么内容。转换的过程就是遍历XML树、匹配模板并生成结果树的过程。理解这一点很重要，因为XSLT并非像CSS那样简单地为元素附加样式，而是要重组整个文档结构。
举个例子，假设有一份记录图书信息的XML文件books.xml，内容是若干个book元素，每个book元素包含title、author和price三个子元素。浏览器原生不认识book、title这些标签，自然不会显示任何可读的内容。但通过XSLT样式表，我们指定当遇到book节点时生成一行HTML表格记录，当遇到title节点时提取文本放在单元格中，如此就可以将XML数据渲染成一个规整的HTML表格。
XSLT转换过程中有两个关键概念需要区分清楚：源树与结果树。源树指原始的XML文档对象模型，结果树则是经过模板匹配后新生成的文档结构。XSLT处理器从根节点/开始，找到匹配根节点的模板，然后根据模板内部指令决定是输出静态文本、拷贝源节点的值，还是继续处理源树中的其他节点。这一机制与面向对象编程中的递归调用非常相似。
编写第一个XSLT样式表：模板规则与xsl:template
一个完整的XSLT样式表首先要有stylesheet根元素，并声明XSLT的命名空间。命名空间的值是http://www.w3.org/1999/XSL/Transform，版本号通常声明为1.0或2.0。最简单的样式表至少包含一个匹配根节点的模板，以及若干匹配具体节点的模板。
这段代码是一个XSLT文件的骨架：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head><title>Book List</title></head>
<body>
<h1>Books</h1>
<xsl:apply-templates select="books/book"/>
</body>
</html>
</xsl:template>
<xsl:template match="book">
<p>
<xsl:value-of select="title"/> -
<xsl:value-of select="author"/> -
$<xsl:value-of select="price"/>
</p>
</xsl:template>
</xsl:stylesheet>
在上述代码中，xsl:template的match属性指定该模板作用于哪些节点。match="/"匹配文档根，match="book"匹配所有book元素。xsl:apply-templates指令告诉处理器去处理select属性指定的节点集合，当前例子中它会触发book模板为每本书生成一段段落内容。
除了xsl:value-of用于提取节点的文本值，还可以用xsl:for-each进行显式循环。这种写法更直白，适合处理嵌套结构固定的文档。它和apply-templates的区别在于：for-each要求开发者亲自指定遍历的集合，而apply-templates将节点选择与模板匹配分离，代码复用性更高。
一个完整的XML转HTML实例：书籍列表页面
接下来给出一个更有实际意义的完整案例。假设XML文件包含五本书的信息，我们希望生成一个带有表格、列标题和表头样式的HTML页面。先看XML源文件：
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book category="web">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<price>39.95</price>
</book>
<book category="web">
<title>XML in a Nutshell</title>
<author>Elliotte Rusty Harold</author>
<price>49.99</price>
</book>
<book category="programming">
<title>XSLT Cookbook</title>
<author>Sal Mangano</author>
<price>59.95</price>
</book>
<book category="programming">
<title>Essential XSLT</title>
<author>Wendell Pie</author>
<price>44.95</price>
</book>
<book category="reference">
<title>XPath and XPointer</title>
<author>John Simpson</author>
<price>45.00</price>
</book>
</books>
对应的XSLT样式表需要生成一个包含书籍编号、书名、作者、价格和分类的表格。其中书籍编号可以利用position()函数生成，分类则取自book元素的category属性。下面的样式表实现这一需求：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>Book Inventory</title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #999; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h1>Book Inventory</h1>
<table>
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Author</th>
<th>Price</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<xsl:for-each select="books/book">
<tr>
<td><xsl:value-of select="position()"/></td>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
<td>$<xsl:value-of select="price"/></td>
<td><xsl:value-of select="@category"/></td>
</tr>
</xsl:for-each>
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
这段样式表的核心是xsl:for-each循环，它遍历books根元素下所有的book子节点，每遇到一个book就生成一行<tr>。在position()函数的帮助下自动生成序号；@category表示取当前节点的category属性值，注意属性名前需要加@符号。运行转换后，浏览器就会看到一个完整的书籍清单页面，表格的行数与XML中book元素的个数保持一致。
如果希望进一步控制输出行的颜色，可以根据position()的奇偶性添加CSS类——XSLT允许在属性值模板中使用{}大括号动态生成属性内容。例如给偶数行添加一个背景类，可以让表格的阅读体验更好。利用xsl:sort还能对输出顺序进行控制，具体来说在for-each内添加<xsl:sort select="price" data-type="number"/>，表格就会按照价格从低到高排列。
XPath表达式在XSLT中的实际用法
XPath是XSLT的查询语言，所有select属性中的表达式都属于XPath语法。掌握XPath是写出高效XSLT样式表的前提条件。前面的示例中已经用到了路径表达式books/book和属性表达式@category。实际上XPath还支持条件筛选、逻辑运算和函数调用。
来看一个具体场景：如果只想列出价格低于50美元的书籍，可以在for-each的select属性中使用谓词表达式。例如books/book[price < 50]会筛选出所有price子元素值小于50的book节点。XPath中的比较运算符可以结合and、or使用来构造更复杂的条件，比如筛选分类为web且价格低于45的书，写法是books/book[@category='web' and price < 45]。
字符串函数同样常用，normalize-space()可以清除文本首尾空白，substring-before()和substring-after()能够提取指定分隔符前后的内容。一个实际场景是处理价格字段时可能会带有货币符号，利用translate()函数剔除美元符号再进行数值比较。XPath函数库还有数学计算、日期处理和节点集操作等丰富的方法，这些函数让XSLT具备了超出简单模板匹配的数据处理能力。
在浏览器和Node.js中执行XSLT转换
浏览器内置的XSLTProcessor对象允许JavaScript运行XSLT转换。基本过程分为三步：创建一个XSLTProcessor实例、调用importStylesheet()导入XSLT样式表、使用transformToFragment()或transformToDocument()执行转换。下面这段JavaScript代码展示了如何在浏览器中将服务器返回的XML字符串与已有的XSLT字符串结合并输出到页面：
function transformXML(xmlString, xslString) {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const xslDoc = parser.parseFromString(xslString, "application/xml");
const processor = new XSLTProcessor();
processor.importStylesheet(xslDoc);
const resultDoc = processor.transformToDocument(xmlDoc);
return new XMLSerializer().serializeToString(resultDoc);
}
需要注意，transformToDocument()返回的是一个XML文档对象，如果结果中包含HTML块级元素，通常建议改用transformToFragment()，后者直接将结果生成为DocumentFragment，可以无缝插入当前DOM树中。使用片段方式还有一个额外优势：脚本执行和样式加载会按HTML文档的解析规则进行。
在Node.js环境中，原生XSLTProcessor并不存在。选用第三方库时需要注意兼容性，常见的方案是使用saxon-js或libxslt的Node绑定。saxon-js是基于Saxon HE版本编译的，支持到XSLT 3.0，适用于复杂场景。另一种轻量的方式是借助xmldom来解析XML，再配合xpath库手动执行节点查询，自行拼接HTML字符串——这种方法更灵活，但需要开发者自己处理转义问题。
最后给出一个在浏览器中使用处理器并显示表格的完整示例，其中XML和XSLT都通过jQuery的ajax请求加载。如果你与后端接口配合，通常后端会直接返回XML文档对象或者将XML字符串放入<textarea>中，前端拿到数据后经过XSLT转换拼接到<div>容器里即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>XSLT Browser Demo</title>
<script>
function loadAndTransform() {
const xmlInput = document.getElementById('xmlSource').value;
const xslInput = document.getElementById('xslSource').value;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlInput, 'application/xml');
const xslDoc = parser.parseFromString(xslInput, 'application/xml');
try {
const processor = new XSLTProcessor();
processor.importStylesheet(xslDoc);
const fragment = processor.transformToFragment(xmlDoc, document);
document.getElementById('output').innerHTML = '';
document.getElementById('output').appendChild(fragment);
} catch (e) {
document.getElementById('output').textContent = '转换失败：' + e.message;
}
}
</script>
</head>
<body>
<h2>XSLT转换演示</h2>
<textarea id="xmlSource" rows="6" cols="60">
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book><title>Learning XML</title></book>
<book><title>XSLT Cookbook</title></book>
</books>
</textarea>
<br />
<textarea id="xslSource" rows="6" cols="60">
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<ul>
<xsl:for-each select="books/book">
<li><xsl:value-of select="title"/></li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
</textarea>
<br />
<button onclick="loadAndTransform()">开始转换</button>
<div id="output" style="margin-top:20px;"></div>
</body>
</html>
执行这段HTML后，点击按钮，textarea中手写的XML数据就会被转换为列表形式显示在下方的输出区域。这个例子演示了前端XSLT转换的最小闭环。实际项目中XSLT文件的加载可以通过fetchAPI完成，不必将样式表硬编码在页面上。
XSLT的适用范围远不止XML转HTML，它同样适用于XML之间迁移、生成纯文本代码或者输出配置文件。掌握XSLT能够显著提升XML数据处理的效率，尤其是当XML数据源来自第三方接口且格式复杂时，一份设计良好的XSLT样式表能够大大简化前端解析和渲染逻辑。面对海量XML数据，XSLT在服务端预处理的性能优势也会逐渐体现出来。