JS读取并输出xml文件节点及属性

book.html   代码如下:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
var xmlDoc;
var browse="";
function loadXML()
{
    var fileRoute="books.xml"
    if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject('Msxml2.DOMDocument');
        xmlDoc.async=false;
        xmlDoc.load(fileRoute);
        browse="ie";
    }
    else if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc=document.implementation.createDocument('', '', null);
        xmlDoc.load(fileRoute);
        browse="ff";
    }
    else
    {
    alert( '未做与该浏览器的兼容!');
    }
}

function getmessage()
{
    var msg='<table border="1" cellspacing="0" cellpadding="0" width="500">';
    msg+='<tr><td width="90"></td><td width="100">图书编号</td><td width="100">种类编号</td><td width="110">图书名称</td><td width="100">作者</td></tr>'
    if(browse=="ff")
    {
        var cNodes = xmlDoc.getElementsByTagName("book");
        for(j=0;j<cNodes.length;j++)
        {
            var bookID=xmlDoc.getElementsByTagName("book")[j].getAttribute("id");
            var sortID=xmlDoc.getElementsByTagName("book")[j].getAttribute("sortID");
            var bookTitle=xmlDoc.getElementsByTagName("title")[j].childNodes[0].nodeValue;
            var bookAuthor=xmlDoc.getElementsByTagName("author")[j].childNodes[0].nodeValue;
            msg+='<tr><td>'+j+'</td><td>'+bookID+'</td><td width="100">'+sortID+'</td><td width="190">'+bookTitle+'</td><td width="120">'+bookAuthor+'</td></tr>'
        }
        
    }
    else if(browse=="ie")
    {
        var state = xmlDoc.readyState;
        if (state == 4)
        {
            var oNodes = xmlDoc.selectNodes("//books/book");
            for(j=0;j<oNodes.length;j++)
            {
                var bookID=oNodes[j].getAttribute("id");
                var sortID=oNodes[j].getAttribute("sortID");
                var bookTitle=oNodes[j].childNodes[0].text;
                var bookAuthor=oNodes[j].childNodes[1].text;
                msg+='<tr><td>'+j+'</td><td>'+bookID+'</td><td width="100">'+sortID+'</td><td width="190">'+bookTitle+'</td><td width="120">'+bookAuthor+'</td></tr>'
            }
        }
    }
    msg+='</table>';
    //alert(msg)
    document.getElementById("bookList").innerHTML=msg;
}

</script>
</head>
<body οnlοad="loadXML();">
<div id="bookList" style="width:500px;">
</div>
<table border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td> </td>
</tr>
</table>
<input name="button" type="button" οnclick="getmessage()" value="onclick" />
</body>
</html>

 

 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

books.xml 代码如下:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<?xml version="1.0" encoding="gb2312"?>
<books>
    <book id="4" sortID="a4">
        <title>author4aa</title>
        <author>author4</author>
    </book>
    <book id="5" sortID="a5">
        <title>author55</title>
        <author>author5</author>
    </book>
    <book id="6" sortID="a6">
        <title>booktitle</title>
        <author>author6</author>
    </book>
    <book id="7" sortID="a7">
        <title>booktitle</title>
        <author>author7</author>
    </book>
    <book id="8" sortID="a8">
        <title>booktitle</title>
        <author>author8</author>
    </book>
    <book id="15" sortID="a15">
        <title>author155</title>
        <author>author15</author>
    </book>
</books>

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 好的,我可以回答这个问题。您可以使用XML解析库(如Python中的ElementTree)来读取XML文件并将其转换为树形结构。然后,您可以使用递归函数来遍历树并生成UI元素,以显示节点和其对应的子节点属性。当用户单击某个节点时,您可以动态显示其子节点属性。您可以使用HTML和JavaScript来创建这个UI,并使用Ajax技术从服务器加载XML文件。 ### 回答2: 在已有基础上增加读取XML后生成树,可以使用XML解析库或者DOM操作将XML文档解析为树形结构。通过遍历树的节点,可以实现对节点的展示和属性的显示。 首先,需要导入XML解析库或者DOM操作的相关模块,例如python中的xml.etree.ElementTree模块。 接下来,读取XML文档,并解析为树形结构。可以使用库提供的方法,如xml.etree.ElementTree.parse()方法。 解析后,可以获取XML文档的根节点,并将根节点设置为树的顶层节点。 在界面中展示树形结构。可以使用图形库或者前端技术,如Tkinter、PyQt、HTML+CSS等实现界面展示。 注册节点点击事件。对于每个节点,通过绑定点击事件的回调函数,实现点击节点时的相应操作。 点击节点时,显示节点对应的子节点属性。在点击事件的回调函数中,可以获取当前点击的节点,并获取该节点的子节点属性。 最后,将子节点属性展示在界面中。可以将子节点属性以文本、表格或者其他形式显示在界面中。 点击其他节点时,重复上述操作,更新界面展示的节点属性信息。 总的来说,实现XML读取后生成树,再点击节点显示子节点属性,需要涉及XML解析、树形结构、界面展示和事件处理等相关技术。 ### 回答3: 在这个基础上增加读取XML并生成树的功能,可以使用XML解析器来实现。首先,我们需要借助XML解析库,如Python中的ElementTree库。通过调用解析器的相应方法,可以读取XML文件并将其解析为树形结构。 读取XML文件并生成树的步骤如下: 1. 导入XML解析器库,如ElementTree。 2. 使用解析器的`parse()`函数读取XML文件,并将其解析为树形结构。 3. 使用`getroot()`函数获取根节点,并以此为基础开始遍历树。 4. 遍历树的每一个节点,并通过`tag`属性获取节点名称,以及`text`属性获取节点的文本内容。 5. 使用`iter()`函数获取节点的所有子节点,并展示子节点的名称。 6. 如果节点属性,则使用`attrib`属性获取所有属性,并展示属性的名称和值。 7. 根据用户的点击,获取相应节点的子节点属性,并展示出来。 这样,当用户点击一个节点时,程序就可以展示该节点的所有子节点属性,满足了题目的要求。同时由于树形结构的特性,用户还可以继续展开子节点,并查看其对应的子节点属性。 通过以上步骤,我们可以实现基于已有功能的XML解析和树形结构生成,以及根据用户点击动态显示子节点属性的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值