JavaScript Recursion to format lists from XML to HTML

问题

I have an exercise where it calls upon me to use recursion to output XML data into HTML list tags. Shamefully admitting my shortcomings in mathematics, I would like someone to show me how to implement recursive logic to XML's 'node structure' using JavaScript.

Here is the outcome: JSFiddle

EDIT Added sample XML to round off this topic and deleted unneeded code. The XML used to create the recursive function:

<ddm>
           <menu0 submenu="true"><name>Welcome</name>
                     <menu1>Home Page</menu1>
                     <menu1>Bulletin</menu1>
                </menu0>
                <menu0 submenu="true"><name>Members\' Area</name>
                    <menu1>Constitution &amp; Bylaws</menu1>
                    <menu1 submenu="true"><name>AGM Minutes</name>
                        <menu2>2012</menu2>
                        <menu2>2011</menu2>
                    </menu1>
                </menu0>
                <menu0>About</menu0>
            </ddm>

<ddm>

回答1:

You call your recursive function once with your top level element. Every child element will simply call the same function. When you get to the bottom, you stop, and everything gets passed back up.

This should get your started (a sample of your xml).

Demo:

Output:

Script:

document.getElementById( 'parse' ).addEventListener( 'click', function () {
    var xml = '<ddm>'
                + '<menu0 submenu="true"><name>Welcome</name>'
                    + '<menu1>Home Page</menu1>'
                    + '<menu1>Bulletin</menu1>'
                + '</menu0>'
                + '<menu0 submenu="true"><name>Members\' Area</name>'
                    + '<menu1>Constitution &amp; Bylaws</menu1>'
                    + '<menu1 submenu="true"><name>AGM Minutes</name>'
                        + '<menu2>2012</menu2>'
                        + '<menu2>2011</menu2>'
                    + '</menu1>'
                + '</menu0>'
                + '<menu0>About</menu0>'
            + '</ddm>',
        xmlDoc = new DOMParser().parseFromString( xml, 'text/xml' ),
        html = nodeMarkup( xmlDoc.documentElement );
    document.getElementById( 'result' ).innerHTML = html;
} );

function nodeMarkup( node ){
    if( node.childNodes.length ) {
        var list = '', header = '';
        for( var index = 0; index < node.childNodes.length; index++ ) {
            if( node.childNodes[index].tagName == 'name' ) {
                header = node.childNodes[index].textContent;
            } else {
                list += nodeMarkup( node.childNodes[index] );
            };
        };
        return node.hasAttribute( 'submenu' ) 
            ? '<li>' + header + '<ul>' + list + '</ul></li>'
            : list;
    } else {
        return '<li>' + node.textContent + '</li>';
    };  
};

HTML:

<input type="button" id="parse" value="Parse" />
<ul id="result"></ul>

CSS:

#result {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

来源：https://stackoverflow.com/questions/15148077/javascript-recursion-to-format-lists-from-xml-to-html

标签

javascript

html

xml

recursion

format