logo标签列表

遍历DOM获取所有子元素及其值

javascriptdomrecursion
7
容器是我添加了一些基本HTML的div。
debug_log函数打印出以下内容：
我在span里！
我在div里！
我在p里！
段落标签中的其余文本（“aragraph tag!!”）发生了什么？我想我不太理解如何精确地遍历文档树。我需要一个函数来解析整个文档树并返回所有元素及其值。下面的代码是为了显示所有值而进行的初步尝试。
    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]);
        }
     }
你是只想要这些元素/节点的DOM版本，还是它们的HTML表示形式？ - user1385191
3个回答
12

通常在遍历DOM时，您需要指定一个起始点。从那里开始，检查起始点是否有childNodes。如果有，则循环遍历它们并递归函数，如果它们也有childNodes。

这是一些使用这些节点的DOM形式输出到控制台的代码（我使用文档/HTML元素作为起始点）。 如果您允许非开发人员加载此页面/代码并使用console，则需要运行if来检查window.console：

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

Example: http://jsfiddle.net/ee5X6/

0

在

<p>I\'m in a <span>p</span>aragraph tag!!</p>

你请求第一个子元素，它是包含"I'm in a"的文本节点。而文本 "aragraph tag!!" 是第三个子元素，但并未被记录。

有趣的是，最后一行包含 "p" 的情况不应该发生，因为 span 元素不是 container 的直接子元素。

0

我不确定这是否是你需要的，或者在你的环境中是否可行，但是 jQuery 可以很容易地实现类似的功能。以下是一个可能有效的快速 jQuery 示例。

<html>
<head>
<script src="INCLUDE JQUERY HERE">
</script>
</head>
<body>
<span>
<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>
</span>
<script>
function traverse(elem){
  $(elem).children().each(function(i,e){
    console.log($(e).text());
    traverse($(e));
  });
}

traverse($("body").children().first());
</script>
</body>
<html>

这将产生以下控制台输出：

I\'m in a span! 
I\'m in a div! 
I\'m in a paragraph tag!!
p
抱歉，我复制您的示例时没有去掉 \\。 - NullRef
3
这里真的没有必要使用jQuery。 - user1385191
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接