javascript快速入门27--XSLT基础 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# javascript快速入门27--XSLT基础 ## XSL 与 XSLT XSL 指扩展样式表语言（EXtensible Stylesheet Language）。它主要被用来对XML文档进行格式化,与CSS不同,XSL不仅仅是样式表语言XSL主要包括三个部分: * XSLT 一种用于转换 XML 文档的语言。它可以将一个XML文件转换成另一种格式的XML文件或XHTML文件. * XPath 一种用于在 XML 文档中导航,定位元素的语言。 * XSL-FO , 可扩展样式表语言格式化对象（Extensible Stylesheet Language Formatting Objects） ,用于格式化供输出的 XML 数据。XSL-FO 目前通常被称为 XSL (尽管这算是一种误解,但这样说是可以的,因为在格式化XML方面,XSL-FO起着和CSS一样的作用!) XSLT 指 XSL 转换（XSL Transformations）。它是 XSL 中最重要的部分。通过 XSLT，您可以向或者从输出文件添加或移除元素和属性。您也可重新排列元素，执行测试并决定隐藏或显示哪个元素，等等。描述转化过程的一种通常的说法是，XSLT 把 XML 源树转换为 XML 结果树。 ## 书写 XSLT XSLT 文件本身也是XML 文件,一般以.xml .xsl .xslt几种文件后缀名保存.XSLT遵循XML的语法,文件开头一般都加有XML声明,XML声明之后是文档根元素stylesheet或transform(两者之一),并且使用version属性声明XSLT版本,目前版本是1.0,2.0还在草案中,XSLT的所有内置元素都从属于"http://www.w3.org/1999/XSL/Transform"命名空间,所以应该在文档根元素上声明一个xsl或xs的命名空间! ``` <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" /> ``` 上面创建了一个最基本的XSLT文件,将其应用于任何XML文档,在支持XSLT的浏览器打开该XML文档,会看到所有的文档显示了出来,而标签没有了!事实上,在浏览器中真正显示的是HTML,XSLT将XML转换成了HTML.我们可以更进一步指定转换成HTML的版本,比如转换成XHTML! ``` <?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" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> </xsl:stylesheet> ``` output元素定义输出文档的格式。method属性可接受xml,html,text,name四种格式;version设置输出格式的 W3C 版本号（仅在 method="html" 或 method="xml" 时使用）; encoding设置输出中编码属性的值(对于HTML将会输出成charset的值); doctype-public规定 DTD 中要使用的公共标识符; doctype-system规定 DTD 中要使用的系统标识符; indent 规定在输出结果树时是否要增加空白,该值必须为 yes 或 no。 ### template 模版可以用template来定义模版.template元素必须有match或name两个属性之一或两者都有,match属性用以并联XML中的元素,其值为一个XPath表达式,XPath表达式所选取的元素会被应用模版而进行转换. name属性为模版定义名称,用以在其它地方引用.一个template元素里面包含的是一些将被输出的HTML或XML标签. ``` <?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" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="/bank/p/name"> Name </xsl:template> </xsl:stylesheet> ``` 对于使用一个没有任何模版的XSLT的XML文件,在浏览器中显示时只是简单的将其中的文本显示出来,应用了上面的XSLT之后,根元素bank下面子元素p的子元素name的值都将会显示成一个加粗的Name!而其它的则只是普通的文本.但这样并没有什么意义,我们还可以更进一步,将被XPath表达式"/bank/p/name"选取的元素的值显示出来-------value-of元素!value-of元素的select属性是必须的,属性值是一个XPath表达式,指定一个节点(如果是多节点,value-of中会获取第一个节点的值),然后将其里面的文本输出!将上面的模版替换成下面的,输出后就会将所有的name加粗! **注意,任何正文内容的输出都应该放在template元素里面!** ``` <xsl:template match="/bank/p/name"> <xsl:value-of select="." /> </xsl:template> ``` 注意上面的value-of的select是使用的 "." ,而没有使用"/bank/p/name",因为"/bank/p/name"返回的是所有的name元素," . "表示模版当前应用的那个元素! 可以定义多个模版,如下: ``` <xsl:template match="/bank/p/name"> <xsl:value-of select="." />--- </xsl:template> <xsl:template match="/bank/p/age"> <xsl:value-of select="." />--- </xsl:template> <xsl:template match="/bank/p/money"> <xsl:value-of select="." /><hr /> </xsl:template> ``` **当多个模版的match表达选取节点重叠时,后出现的模版的格式会覆盖先出现的,可以使用template元素的priority属性对模版的优先组进行编号,其值是一个数字,越大优先级越高!** 这样,便给name,age,money这些元素都进行了格式化输出,但现在输出的HTML代码顺序仍然是按照在XML源文件中出现的顺序出现的.当需要对整个XML文档进行格式化输出的时候,可以将match属性设为"/" ``` <xsl:template match="/" /> ``` 使用上面的模版,将会使XML文档在浏览器中没有任何输出.可以在应用于根节点的模版中加上HTML标签,以输出完整的HTML文档! ``` <xsl:template match="/"> <html> <head> <title>XSLT</title> </head> <body> 一个HTML页面 </body> </html> </xsl:template> ``` 这样,即使定义了其它模版,它们的输出也不会出现在浏览器中,因为上面的模版覆盖了其它应用于子节点的模版的输出,要在其中包含其它模版的内容,可以使用XSLT的apply-templates元素来应用模版,该元素有两个属性,select属性值是一个XPath表达式,XPath表达式选取的节点及其子节点将被应用模版. 如果没有为这些节点定义模版,则直接输出节点的值.如果apply-templates元素不指定select属性,则将给当前节点(template元素的match属性所匹配的节点)的所有后代节点应用模版,如果没有定义模版,则直接输出所有节点的值. 下面的代码将直接输出所有节点的值 **XSLT中有一个规定:如果一个节点没有任何可用的template,则将这个节点中所有文本节点的值返回!** ``` <xsl:template match="/"> <xsl:apply-templates /> </xsl:template> ``` 可以指定select属性,指明哪些节点将应用模版并输出在这个地方,这样就可以不以XML源文件中的顺序输出数据了! ``` <xsl:template match="/"> <xsl:apply-templates select="/bank/p/money" /> <hr /> <xsl:apply-templates select="/bank/p/name" /> </xsl:template> ``` 还可以使用call-template调用指定的模版,call-template元素的name属性指定要调用模版的name ### attribute 给元素添加属性使用attribute元素,可以在转换时给元素动态添加属性!其语法很简单,下面是一个给img元素添加值为"test.jpg"的src属性的代码: ``` <img> <xsl:attribute name="source">test.jpg</xsl:attribute> </img> ``` ### for-each 节点遍历 XSLT中的for-each 元素允许您在 XSLT 中进行循环。该元素的select属性与其它元素的select属性一样,其值是一个XPath表达式,被XPath表达式选取的元素将被遍历! ``` <xsl:template match="/"> <xsl:for-each select="/bank/p/name"> <xsl:value-of select="." /> </xsl:for-each> </xsl:template> ``` 上面的代码将遍历所有根元素bank的子元素p的name子元素并加以格式化后输出它的值. 注意,value-of元素的select的值"."表示选取当前节点,在for-each的内部,当前节点为for-each当前遍历到的节点! ### sort 排序 sort 元素用于对结果进行排序。sort元素需要放在for-each元素内部.sort元素的select属性值为选取排序依据节点的XPath表达式,data-type属性有两个取值(text|number),指明是按字母顺序排序还是按数字大小排序! 另外,它还有个order属性,可以指定是按正顺还是倒序排序,取值为(ascending|descending),默认是ascending(正序)! ``` <xsl:for-each select="/bank/p"> <xsl:sort select="./money" data-type="number" /> <xsl:value-of select="./money" /> </xsl:for-each> ``` ### if 条件测试在XSLT中还可以使用if元素进行条件判断,该元素的test属性值为一个条件测试XPath表达式,当值计算结果是真的时候才处理if元素中的内容! ``` <xsl:for-each select="/bank/p"> <xsl:sort select="./money" data-type="number" order="descending" /> <xsl:if test="position() < 4 and age >=18"> <xsl:value-of select="./money" /> </xsl:if> </xsl:for-each> ``` 上面的代码用以输出money排前三名的成年人. 注意,在if元素的test属性中,XPath表达中的一些特殊字符(如大于和小于)必须写成实体引用! ### choose when...otherwise...... 多重条件测试出于习惯,见到if语句可能会想到if...else语句,但XSLT中并没有if..else语句,取而代之的是即有if...else功能,又有switch..case功能的choose元素,choose元素有两个子元素when与otherwise,相当于 else if 与else ,或者,when相当于case语句,otherwise相当于default.when元素的test属性值同样是一个XPath表达式,当这个表达式返回真的时候,when的子元素才会显示!otherwise没有test属性,当所有的when元素的test都失败后,处理otherwise子元素! ``` <xsl:choose> <xsl:when test="name='PHPer'">PHPer就是PHP程序员的意思!</xsl:when> <xsl:when test="name='CJ'">好好Coding,天天向上!</xsl:when> <xsl:when test="name='DBD'">不懂!</xsl:when> <xsl:otherwise>其它人</xsl:otherwise> </xsl:choose> ``` ## 浏览器中的 XSLT 只要有XML与XSLT解释引擎,就可以在任何地方使用任何语言利用XSLT将XML转换成HTML或其它文档,并且使用不同的语言并不会影响转换结果.也就是说,这种转换是与语言无关的,既可以在服务器端进行转换后,返回HTML页面,也可以客户端进行转换,它们的效果都是一样的.而且在客户端对XML文件进行转换,可以减轻服务器的负担. 在一个引入了XSLT文件的XML文件,浏览器会自动对其进行转换.但是,XML一般并不是在浏览器中显示,而是用来读取数据.当使用其它语言来手动转换时,需要将xml-stylesheet这样的PI去掉,这样,XML 文件可使用多个不同的 XSL 样式表来进行转换,增加了灵活性。 ### IE 中的XSLT 与IE支持XML DOM 一样,IE中XSLT相关API显得十分简单,同时IE对XSLT的支持也很有限!下面是在IE 中将一个XMLDOM使用XSLT转换成HTML的示例: ``` //载入XML数据文件 var xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.load("test.xml"); //载入XSLT文件,XSLT也是作为XML文件载入的 var xsl = new ActiveXObject("Microsoft.XMLDOM"); xsl.async = false; xsl.load("test.xsl"); //直接在要转换的DOM上调用transformNode方法,传入XSLT DOM,返回字符串 document.write(xml.transformNode(xsl)); ``` ### Mozilla 中的XSLT 与Mozilla对XML DOM的支持一样,它对XSLT的支持更标准但更复杂!Mozilla使用一个XSLTProcessor对象来处理与XSLT有关的转换. ``` //载入XML数据 var xml = document.implementation.createDocument("","",null); xml.async =false; xml.load("test.xml"); //载入XSLT var xsl = document.implementation.createDocument("","",null); xsl.async =false; xsl.load("test.xsl"); //创建XSLTProcessor var xslPro = new XSLTProcessor(); xslPro.importStylesheet(xsl);//导入XSLT //使用transformToDocument将XML按XSLT进行转换,返回新文档的DOM var result = xslPro.transformToDocument(xml); //要将返回的DOM转换成字符串,还要使用XMLSerializer对象 var serializer =new XMLSerializer(); var html = serializer.serializeToString(result); document.write(html); ```