从DOM生成XML文档，同时跳过某些元素

Question

我有尝试从中生成XML文档的HTML。 我想跳过某些元素（基本上是除div以外的所有元素），为此，我编写了一个简单的DOM遍历函数，但似乎陷入了无限循环。 （下面有更多详细信息。）

所以我有看起来像这样的HTML：

<div id="browserDiv">
    <h3>Library</h3>
    <ul>
        <li>
            <div id="t-0" class="section topic" data-content="2b-2t-38-w-2c-2w-2t-33-36-3d">
                <p>Set Theory</p>
                <img class="toggle"><img class="edit">
                <img class="add-entry"><img class="delete">
                <ul>
                    <li>
                        <div id="t-0-0" class="section topic" data-content="1t-3c-2x-33-31-37">
                            <p>Axioms</p>
                            <img class="toggle"><img class="edit">
                            <img class="add-entry"><img class="delete">
                            <ul>
                                <li>
                                    <div id="t-0-0-0" class="section topic" data-content="1t-3c-2x-33-31-w-33-2u-w-2b-2t-34-2p-36-2p-38-2x-33-32">
                                        <p>Axiom of Separation</p>
                                        <img class="toggle"><img class="edit">
                                        <img class="add-entry"><img class="delete">
                                        <ul>
                                            <li>
                                                <img class="add-new">
                                            </li>
                                        </ul>
                                </li>
                                <li>
                                    <img class="add-new">
                                </li>
                        </div>
                    </li>
                    <li>
                        <img class="add-new">
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div id="t-1" class="section topic" data-content="1t-32-2p-30-3d-37-2x-37">
                <p>Analysis</p>
                <img class="toggle"><img class="edit">
                <img class="add-entry"><img class="delete">
                <ul>
                    <li>
                        <img class="add-new">
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <img class="add-new">
        </li>
    </ul>
</div>

这是屏幕截图：

而且我正在尝试将此html转换为XML文件。 但是XML只存储div元素中包含的信息，因此在遍历DOM树时，我试图跳过所有其他元素。

我打算最终产生的那种XML：

<?xml version="1.0" encoding="UTF-8"?>
<library userid="095209376">
    <title>UserID095209376's Library</title>
    <topic children="yes" loadable="no">
        <id>0</id>
        <encoding>2b-2t-38-w-2c-2w-2t-33-36-3d</encoding>
        <topic children="yes" loadable="no">
            <id>0-0</id>
            <encoding>1t-3c-2x-33-31-37</encoding>
            <topic children="no" loadable="yes">
                <id>0-0-0</id>
                <encoding>1t-3c-2x-33-31-w-33-2u-w-2b-2t-34-2p-36-2p-38-2x-33-32</encoding>
            </topic>
        </topic>
    <topic children="yes" loadable="no">
        <id>1</id>
        <encoding>1t-32-2p-30-3d-37-2x-37</encoding>
    </topic>
</library>

这是我目前正在迭代的方式：

（请注意，脚本标记仅用于使SO进行语法突出显示。）

<script>
function saveLibrary(){

    var xmlDoc = document.implementation.createDocument('http://www.tuningcode.com', 'library');
    var rootNode = document.getElementById('browserDiv');
    console.log("rootNode here: " + rootNode);
    var libraryTree = walkLibraryTree2(rootNode, xmlDoc);
    xmlDoc.documentElement.appendChild(libraryTree);
    var oSerializer = new XMLSerializer();
    var sXML = oSerializer.serializeToString(xmlDoc);
    console.log("xmlDoc: " + xmlDoc);
    console.log(sXML);

}

function walkLibraryTree2(nodeToWalk, doc){

    var elem = doc.createElement(nodeToWalk.tagName);
    console.log(elem);
    if(nodeToWalk.hasChildNodes()){
        var ch = nodeToWalk.children;
        for(var i = 0; i < ch.length; i++){
            var theWalk = walkLibraryTree2(ch[i], doc);
            if(theWalk != null){
                if(ch[i].tagName == 'DIV'){
                    elem.appendChild(theWalk);
                } else{
                    elem = theWalk;
                }
            }
        }
        return elem;
    } else {
        return null;
    }
}

saveLibrary();
</script>

问题是，当我运行它时，（编辑）它花费的时间比应该花费的时间长得多，并且会生成如下内容：

<library xmlns="http://www.tuningcode.com"><LI xmlns=""/></library>.

换句话说，它不打印任何div，而仅打印一个li元素。 我已经将它打印到控制台了很多，即使只有上面显示的节点数量，它也可以将数千条语句打印到控制台。

问题：

如何跳过除div元素之外的所有元素遍历树？ 还是为什么上面的代码无法正常工作？

这是一个JSFiddle：

http://jsfiddle.net/4bGjH/

Answer 1

我认为您遇到了非常长的运行时间，因为对于for循环的每次迭代walkLibraryTree2两次调用walkLibraryTree2 ，从而导致指数级扩展（您的HTML深度为13个级别，因此， walkLibraryTree2被调用了8,000次以上）。

处理复杂的问题时，最好将其分解为较小的部分。 以下似乎有效：

<script>
function saveLibrary() {
    var xmlDoc = document.implementation.createDocument(null, 'library');
    var rootNode = document.getElementById('browserDiv');
    console.log("rootNode here: " + rootNode);

    appendNodes(xmlDoc.documentElement, processChildren(rootNode, xmlDoc));

    var oSerializer = new XMLSerializer();
    var sXML = oSerializer.serializeToString(xmlDoc);
    console.log("xmlDoc: " + xmlDoc);
    console.log(sXML);
}

// DomNode, Document -> Array[DomNode]
function processChildren(node, doc) {
    var nodes = [],
        i;

    for (i = 0; i < node.childNodes.length; i += 1) {
        nodes = nodes.concat(processNode(node.childNodes[i], doc));
    }

    return nodes;
}

// DomNode, Array[DomNode] -> void
function appendNodes(destNode, nodes) {
    var i;

    for (i = 0; i < nodes.length; i += 1) {
        destNode.appendChild(nodes[i]);
    }
}

// DomNode, Document -> Array[DomNode]
function processNode(node, doc) {
    var children = processChildren(node, doc);

    if (node.tagName == "DIV") {
        return [createTopicElement(node, doc, children)];
    } else {
        return children;
    }
}

// DomNode, Document, Array[DomNode] -> DomNode
function createTopicElement(baseNode, doc, children) {
    var el = doc.createElement("topic"),
        hasChildren = !! children.length,
        id = node.id.substring(2),
        encoding = node.getAttribute("data-content");

    el.setAttribute("children", hasChildren ? "yes" : "no");
    el.appendChild(createElementWithValue(doc, "id", id));
    el.appendChild(createElementWithValue(doc, "encoding", encoding));
    appendNodes(el, children);

    return el;
}

// Document, String, String -> DomNode
function createElementWithValue(doc, name, value) {
    var el = doc.createElement(name);
    el.textContent = value;
    return el;
}

saveLibrary();    
</script>

生成XML：

<library>
    <topic children="yes">
        <id>0</id>
        <encoding>2b-2t-38-w-2c-2w-2t-33-36-3d</encoding>
        <topic children="yes">
            <id>0-0</id>
            <encoding>1t-3c-2x-33-31-37</encoding>
            <topic children="no">
                <id>0-0-0</id>
                <encoding>1t-3c-2x-33-31-w-33-2u-w-2b-2t-34-2p-36-2p-38-2x-33-32</encoding>
            </topic>
        </topic>
    </topic>
    <topic children="no">
        <id>1</id>
        <encoding>1t-32-2p-30-3d-37-2x-37</encoding>
    </topic>
</library>

我不知道您的loadable属性是如何确定的，或者标题是从哪里来的，但这应该可以帮助您达到目标。

http://jsfiddle.net/Weu4A/4/