使用Javascript修改XML元素(在XSLT样式表中)

时间:2014-04-13 01:23:03

标签: javascript xml xslt getelementsbytagname

使用XML标记,我在一首诗中标记了某些特征(但丁的神曲)。当读者阅读这首诗时,我希望能够为他/她提供按钮来显示或隐藏(通过预定的格式更改)无论她/他想要的功能。

所以,我正在尝试在我的XSLT样式表中编写一个函数,它找到所有XML元素的实例并修改内容的格式。

我做了很多阅读/研究,我想我明白我需要一个循环找到所有实例并修改它们,如下所示:

 <script type="text/javascript">
            function displayal() {
                var elems = document.getElementsByTagName('al');
                for(var i = 0; i &lt; elems.length; i++) {
                    elems[i].style.color = 'blue';
                }
            }                                               
 </script>   

仅供参考,'al'是我用于头韵的标签的名称。理论上,上面将'al'标签中的所有文本都变为蓝色。

虽然上面的内容可能不正确(并且肯定会更正),但我相信我有一个更基本的问题:我根本不知道如何告诉我在XSLT样式表中放入的函数来查看XML文档!我能够理解的唯一例子是被修改的元素在同一个html文档中。

如果有帮助,这是我的xml文件的一部分:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../para3.xsl"?>

<canto id="3">
    <title> Paradiso 3 </title>
    <ter id="1">
        <l1>Quel sol che pria d'amor mi scaldò 'l petto,</l1>
        <l2>di bella verità m'avea scoverto,</l2>
        <l3><rp>provando e riprovando</rp>, il dolce aspetto;</l3>
    </ter>
    <ter id="2">
        <l1>e io, per <al>confessar corretto e certo</al></l1>
        <l2>me stesso, tanto quanto si convenne</l2>
        <l3>leva' il capo a proferer più erto;</l3>
    </ter>
    <ter id="3">   
        <l1>ma visïone apparve che ritenne</l1>
        <l2>a sé me tanto stretto, per vedersi,</l2>
        <l3>che di mia confession non mi sovvenne.</l3>
    </ter>
    [....]
    <cog> ... </cog>

这是xsl文件的要点:

<?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:xs="http://www.w3.org/2001/XMLSchema"
        exclude-result-prefixes="xs"
        version="2.0">
<xsl:template match="/">
<html>
    <head>
      <title><xsl:value-of select="canto/title"/></title>
    </head>
    <body>
      <script type="text/javascript">
         function displayal()
            var elems = document.getElementsByTagName('al');
            for(var i = 0; i &lt; elems.length; i++) {
            elems[i].style.color = 'blue';
         }                                               
       </script>   
       <div id="container" style="width:800px;background-color:#FFD700">
       <div id="header" style="background-color:#FFA500;height:100px;">
       <h1 style="margin-bottom:10;">Code and Poetry</h1></div>

       <div id="menu" style="width:200px;float:left;">
       <p>Display Options</p>
         <button onclick="displayil()">Show Alliteration</button>
         <button onclick="undisplayil()">Hide Alliteration</button>
       </div>
       <div id="content" style="background-color:#EEEEEE;width:600px;float:left;">
           <h2><i><xsl:value-of select="canto/title"/></i></h2>
           <xsl:apply-templates select="canto/ter"/>
           <xsl:apply-templates select="canto/cog"/>                       
       </div>

如果你已经做到这一点,那么,勇敢。谢谢!

1 个答案:

答案 0 :(得分:1)

您应该仔细了解数据流。 XSL转换的输入是XML和XSL样式表。输出是HTML,包括script元素。 HTML浏览器显示HTML并等待它将传递给HTML元素的用户界面事件。

您需要安排,当HTML浏览器通知某个事件的某个HTML元素(您的选择)时,您的元素将拥有该事件的处理程序。也许您会通过向HTML按钮onclick元素添加onclick属性来放置input处理程序。也许您只需将onclick处理程序附加到span元素或div元素,该元素包含代表您的可点击区域的文本或图形。 onclick处理程序将指定要调用的JavaScript函数,例如函数displayal

您的函数displayal需要对HTML元素进行操作,而不是元素canto中的XML。因此,您将不想使用getElementsByTagName('al'),而是使用一些函数来获取XSL模板(例如canto/ter)生成的任何HTML元素。如果这些是HTML无序列表ul元素,那么您将使用getElementsByTagName('ul')

顺便说一句,我建议使用编辑来纠正函数displayal中使用大括号。