/////////////////////////////////////////////////////////// First: The XML file (Tree.xml) reads as follows: <?xml version= "1.0" encoding= "gb2312"?> <treeview> <tree id= "P1" > <text> Shandong Province </text> <target>_blank</target> <title> Provinces </title> <link></link> <tree id= "P1-1" > <text> Weihai </text> <target>_blank</target> <title> City </title> <link></link> </tree> <tree id= "P1-2" > <text> Yantai </text> <target>_blank</target> <title> City </title> <link></link> <node id= "p1-2-1" > <text> Long Kuang Cun </text> <target>_blank</target> <title> Township </title> <link>http://www.111cn.net/</link> </node> </tree> <node id= "P1-3" > <text> Fu Zhen </text> <target>_blank</target> <title> Township </title> <link>http://www.111cn.net/</link> </node> </tree> <tree id= "P2" > <text> Hebei province </text> <target>_blank</target> <title> Provinces </title> <link></link> <tree id= "p2-1" > <text> Botou </text> <target>_blank</target> <title> City </title> <link></link> <node id= "P2-1-1" > <text> Jiao River </text> <target>_blank</target> <title> Township </title> <link>http://www.111cn.net/</link> </node> </tree> <tree id= "P2-2" > <text> Shijiazhuang </text> <target>_blank</target> <title> City </title> <link></link> </tree> </tree> <tree id= "P3" > <text> Zhejiang province </text> <target>_blank</target> <title> Provinces </title> <link></link> <tree id= "P3-1" > <text> Hangzhou City </text> <target>_blank</target> <title> City </title> <link></link> <node id= "P3-1-1" > <text> a town </text> <target>_blank</target> <title> Township </title> <link>http://www.111cn.net/</link> </node> </tree> <tree id= "P3-2" > <text> Wenzhou </text> <target>_blank</target> <title> City </title> <link></link> <node id= "p3-2-1" > <text> a town </text> <target>_blank</target> <title> Township </title> <link>http://www.111cn.net/</link> </node> </tree> </tree> </treeview> ////////////////////////////////////////////////////// Then: JavaScript function implementation: (File name: tree.htm) <script language= "JavaScript" > var HTML = ""; var space = ""; var blank = ""; function Getsubject () { var xmldoc; if (window. ActiveXObject) { Object that gets the XML file for the operation xmldoc = new ActiveXObject (' Microsoft.XMLDOM '); Xmldoc.async = false; Xmldoc.load ("Tree.xml"); if (xmldoc = null) { Alert (' Your browser does not support XML file reads, so this page prohibits your operation, the recommended use of IE5.0 above can solve this problem! '); window.location.href= '/index.aspx '; Return } } Parse XML file to determine if error if (xmlDoc.parseError.errorCode!= 0) { alert (XmlDoc.parseError.reason); Return } Get root Contact var nodes = XmlDoc.documentElement.childNodes; The number of common sub contacts under root contact is obtained, and the cyclic for (var i=0; i<nodes.length; i++) { If the contact name is tree if (nodes (i) nodename = = "Tree") { Readtree (Nodes (i)); } If the contact name is node else if (nodes (i). nodename = = "Node") { ReadNode (Nodes (i)); } } Delete Object Delete (xmldoc); Show HTML Window.show.innerHTML = HTML; Return } Read tree node function Readtree (CI) { var nodes = Ci.childnodes; var menuhtml = space; menuhtml + = blank; Get Super Link menuhtml + = "<a href= '"; If the connection property of the node is not empty, the connection if (Ci.selectnodes ("link") (0). Text!= "") { menuhtml + = ci.selectnodes ("link") (0). text; } Otherwise an empty link Else { menuhtml = "#"; } Goal if (Ci.selectnodes ("target") (0). Text!= "") { menuhtml + + "target= '" +ci.selectnodes ("target") (0). text; menuhtml + = "'"; } Click the menu event to invoke the Divshow (vid) function menuhtml + + "onclick=javascript:divshow ('" +ci.getattribute ("id") + "');"; Get the node title menuhtml + = "title= '"; menuhtml + = Ci.selectnodes ("title") (0). text; End menuhtml = "' >"; Get the body of the node menuhtml + = ci.selectnodes ("text") (0). text; menuhtml + = "</a><br>n"; Add menuhtml settings to an HTML string HTML + menuhtml; Gets the attribute value of the node <span HTML + + "<div id= '" +ci.getattribute ("id") + "' style= ' display:none ' >n '"; for (var i=0; i<nodes.length; i++) { var tempimg = ""; Tempimg + = blank; if (nodes (i) nodename = = "Tree") { Space + + tempimg; Readtree (Nodes (i)); Space = ""; } else if (nodes (i). nodename = = "Node") { Space + + tempimg; ReadNode (Nodes (i)); } } HTML + + "</div>n"; Return } Read node nodes function ReadNode (CI) { var nodehtml = space; nodehtml + = blank; Set up hyperlinks nodehtml + = "<a href= '"; Get the connection address nodehtml + = ci.selectnodes ("link") (0). text; Goal if (Ci.selectnodes ("target") (0). Text!= "") nodehtml + = "' target= '" +ci.selectnodes ("target") (0). text; Get the node title nodehtml = "' title= '"; nodehtml + = Ci.selectnodes ("title") (0). text; End nodehtml = "' >"; Get the body of the node nodehtml + = ci.selectnodes ("text") (0). text; nodehtml + = "</a><br>n"; HTML + nodehtml; HTML + + "<div id= '" +ci.getattribute ("id") + "' >"; Space = ""; Return } Action Object display or hide effect function Divshow (VID) { if (Document.all[vid].style.display = "None") { Document.all[vid].style.display = "block"; } Else { Document.all[vid].style.display = "None"; } Return } </script> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <title>JS_XML</title> <style type= "Text/css" > <!-- Body { margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; font-size:9pt; } A { Text-decoration:none; Font-family: "The song Body"; font-size:9pt; COLOR: #000000; } --> </style> <body bgcolor= "#EEEEEE" leftmargin= "0" topmargin= "0" > <div id=show></div> </body> <script> Getsubject () </script>
|