HTML tree structure, XML to TREE tree

Some of my solutions need to use the XML structure, for example, to generate the XML class without any need to read the database from time to time for foreground operations. I have previously written XML to tree, which is not conducive to search engine optimization. So I chose a scheme to convert XML into HTML and then make HTML into a tree.

First

The HTML structure is as follows:

<DL>
<DT> content </DT>
<DD>
Subclass, so repeated
</DD>
</Dl>

Firebug Diagram

JSCode:

Function html2tree (box, type) {This. panel = This. get (box); this. init (); If (type) {This. panel. classname = 'html2tree html2tree _ '+ type ;}}; html2tree. prototype = {init: function () {var nodes = This. tag ('dl ', this. panel), S = this; for (VAR I = nodes. length; I --;) {var DL = nodes [I], DD = This. tag ('dd', DL), dT = This. tag ('dt', DL) [0]; this. setlast (DL); If (DD. length = 0) {DT. classname = 'fi Le ';} else if (S. Display (Dd [0])! = 'None') {DT. classname = 'open';} This. live (function () {var dd = S. next (this), open; If (dd) {open = S. display (dd) = 'none' DD. style. display = open? 'Block': 'none'; this. classname = open? 'Open': ''; }}, function () {return/DT/I. test (this. nodename) ;}) ;}, display: function (EL) {var cc = el. currentstyle | document. defaultview. getcomputedstyle (El, null); Return el. style ['display'] | CC ['display'];}, live: function (FN, c) {This. panel. onclick = function (e) {e = E | window. event; var S = E. srcelement | e.tar get; while (S & S! = This) {If (C. call (s) {fn. call (S, e); break;} s = S. parentnode ;}}, next: function (DT) {var next = DT, DD; do {next = next. nextsibling; If (next &/DD/I. test (next. nodename) {dd = next; break;} while (next); Return dd;}, setlast: function (DL) {var last = DL, next = dl; do {next = next. nextsibling; If (next &/dl/I. test (next. nodename) {last = next;} while (next); last. class Name = 'last';}, get: function (EL) {return typeof El = "string "? Document. getelementbyid (EL): El ;}, Tag: function (TAG, El) {return (El | document. Body). getelementsbytagname (TAG );}};

Call Method

 
New html2tree ('tree ', 'Min'); // skin: Red, XP, Min, circle, A3, black, CHM // The second parameter is skin, 7 skin types supported
 

Finally, we will package and download the code. Haha, you are welcome to make a brick. Please do not speak the same language. You can choose to use it or not .!

Thank you!

Original Code. For reprint, please contact Chai Ge !!!

Click to download