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

标签 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>

如果你已经做到了这一步,那就太棒了。谢谢!

最佳答案

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

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

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

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

关于javascript - 使用 Javascript 修改 XML 元素(在 XSLT 样式表中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23038059/

相关文章:

Javascript 不适用于 WebView - Android

javascript - 使用 NodeJS 和 HighStocks(或 Google Annotation Time Line)设计 Web 应用程序

java - 如何解决 NetBeans IDE 7.1.1 中 GlassFish Server 3.1.2 启动失败的错误?

Java XML - 将字符转换为实体

xml - 使用 XSLT 将 XML 中的日期和转换为 UTC 时区

xml - 使用XSL获取XML的子节点名称

javascript - 使用按位运算符(JSFeat)修改图像像素

javascript - react-apollo gql, TypeError : Object(. ..) 不是函数

java - 如何将 SFTP 中的 FileObject 保存为本地文件?

javascript - 如何使用 jQuery 更新文本区域内的代码