通过DOM进行解析可获得所有子项和值

Parsing through DOM get all children and values

本文关键字：可获得 DOM 通过      更新时间：2023-09-26

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

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

我在一个跨度
我在一个分区
我在
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]);
        }
     }

通常在遍历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/

在中

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

您请求第一个子节点，它是包含"I''am in a"的文本节点。文本"aragraph tag！！"是第三个子项，未记录。

奇怪的是，包含"p"的最后一行永远不应该出现，因为span元素不是容器的直接子元素。

我不确定这是否是您所需要的，也不确定在您的环境中是否可能，但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
相关文章：