javascript - リストを XML から HTML にフォーマットするための JavaScript 再帰

Question

再帰を使用して XML データを HTML リスト タグに出力する必要がある演習があります。恥ずべきことですが、数学の私の欠点を認めて、JavaScript を使用して XML の「ノード構造」に再帰的ロジックを実装する方法を誰かに教えてもらいたいと思います。

結果は次のとおりです。

編集 このトピックを締めくくるためにサンプル XML を追加し、不要なコードを削除しました。再帰関数の作成に使用される 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>

<ddm>

Answer 1

トップレベル要素で再帰関数を 1 回呼び出します。すべての子要素は、単純に同じ関数を呼び出します。どん底に到達すると停止し、すべてが元に戻されます。

これで開始できます (xml のサンプル)。

デモ：

出力：

脚本：

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;
}