使用onclick事件来构建可扩展的列表

我试图显示我的xml文件中存在的节点。我所要求的是，只有在单击父节点时才显示子节点。我尝试使用onclick，但有一个错误(我不确定是否onclick可以在这种情况下使用)

我的xml看起来像这样(它不能被修改)

<Types xmlns:xsi="http://www.w3.org..">
    <entities1>
        <abc gender="male" ></abc>
        <xyz sub="" norm=""></xyz>
    </entities1>   
    <entities2>
        <Phrase>Some Phrase</Phrase>
        <SC/> 
    </entities2>
</Types>

code I tried
 var nodes = xmlDoc.documentElement.childNodes;
        for (i = 0; i < nodes.length; i++)
        {
            var node = nodes[i];
            if (node.nodeName === '#text')
            {
                document.write("");
            }
            else
            {
           document.write("<br><br>" + "<b>" + "<ul>" + node.nodeName + "
           </ul>" + "</b>" + "<br>");             
           document.getElementsByClassName("node").onclick= function () {
                        if (node.hasChildNodes())
                        {
                            var children = node.childNodes;
                            for (var j = 0; j < children.length; j++)
                            {
                                var child = children[j];
                                if (child.nodeName === '#text' || 
                                child.nodeName === '#comment')
                                {
                                    document.write("");
                                }
                                else {
                                    document.write("<li>" + 
                                    child.nodeName + "  " + 
                                    child.textContent + "</li>" + "
                                    <br>");
                                    for (var k = 0; k < 
                                    child.attributes.length; k++) {
                                        var attrib = child.attributes[k];
                                        if (attrib.specified === true) {
                                            document.write("<li>" + 
                                            attrib.name + " = " + 
                                            attrib.value + "</li>" + "
                                            <br>");

                                        }
                                        document.write("<br>");
                                    }

                                }

                            }
                        }
                    };
                }
     }

    <!DOCTYPE html>
    <html>
    <head>
      <title>
      </title>
      <script type="text/javascript">
      function loadXMLDoc(dname)
                {
                    if (window.XMLHttpRequest)
                    {
                        xhttp=new XMLHttpRequest();
                    }
                    else
                    {
                        xhttp=new ActiveXObject("Microsoft.XMLDOM");
                    }
                    xhttp.open("GET",dname,false);
                    xhttp.send();
                    return xhttp.responseXML;
                }
          var myxml = loadXMLDoc("test.xml");
          //document.write(myxml.getElementsByTagName("title")[0].childNodes[0].nodeValue + "<br>");
          var mybtn = document.getElementById('expand_parent');
          function myfun1(){
            var divarea = document.getElementById('myanchor');
            var msg = myxml.getElementsByTagName("bookstore")[0].childNodes[0].nodeValue;
            divarea.text = msg;
          }
          function myfun2(){
            var divarea = document.getElementById('mydiv');
            var output = "";
            var x = myxml.getElementsByTagName("title");
            for (i=0;i<x.length;i++)
            {
              output += x[i].childNodes[0].nodeValue;
              //output+=": ";
              //output+=x[i].childNodes[0].nodeValue;
              output+="<br>";
            }
            divarea.innerHTML = output;
          }
      </script>
    </head>
    <body onload="myfun1()">
      <a href="#" id="myanchor" onclick="myfun2();return false;">
      </a>
    <div id="mydiv"></div>
    </body>
    <html>
and my xml is as follows : 
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>Mybookstore
  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="web">
    <title lang="en">XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
  </book>
  <book category="web" cover="paperback">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>

相关内容

最新更新

热门标签：