javascript - 通过 DOM 解析获取所有子项和值

Question

Container 是我添加了一些基本 HTML 的 div。

debug_log 函数正在打印以下内容:

I'm in a span!
I'm in a div!
I'm in a
p

p 标签中的其余文本发生了什么(“aragraph 标签!!”)。我想我不明白如何遍历文档树。我需要一个函数来解析整个文档树并返回所有元素及其值。下面的代码是第一次尝试显示所有值。

    container.innerHTML = '<span>I\'m in a span! </span><div> I\'m in a div! </div><p>I\'m in a <span>p</span>aragraph tag!!</p>';

    DEMO.parse_dom(container);



   DEMO.parse_dom = function(ele)
    {
        var child_arr = ele.childNodes;

        for(var i = 0; i < child_arr.length; i++)
        {
            debug_log(child_arr[i].firstChild.nodeValue);
            DEMO.parse_dom(child_arr[i]);
        }
     }

Answer 1

一般在遍历 DOM 时，都希望指定一个起点。从那里，检查起点是否有 childNodes。如果是，遍历它们并递归函数(如果它们也有 childNodes)。

下面是一些使用这些节点的 DOM 形式输出到控制台的代码(我使用 document/HTML 元素作为起点)。如果您允许非开发人员加载此页面/代码并使用 console，则需要针对 window.console 运行 if:

recurseDomChildren(document.documentElement, true);

function recurseDomChildren(start, output)
{
    var nodes;
    if(start.childNodes)
    {
        nodes = start.childNodes;
        loopNodeChildren(nodes, output);
    }
}

function loopNodeChildren(nodes, output)
{
    var node;
    for(var i=0;i<nodes.length;i++)
    {
        node = nodes[i];
        if(output)
        {
            outputNode(node);
        }
        if(node.childNodes)
        {
            recurseDomChildren(node, output);
        }
    }
}

function outputNode(node)
{
    var whitespace = /^\s+$/g;
    if(node.nodeType === 1)
    {
        console.log("element: " + node.tagName);  
    }else if(node.nodeType === 3)
    {
        //clear whitespace text nodes
        node.data = node.data.replace(whitespace, "");
        if(node.data)
        {
            console.log("text: " + node.data); 
        }  
    }  
}

示例:http://jsfiddle.net/ee5X6/