Parsing through DOM get all children and values

Container is a div i've added some basic HTML to.

The debug_log function is printing the following:

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

What happened to the rest of the text in the p tag ("aragraph tag!!"). I think I don't understand how exactly to walk through the document tree. I need a function that will parse the entire document tree and return all of the elements and their values. The code below is sort of a first crack at just getting all of the values displayed.

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

标签： javascript dom recursion

3条回答

Luminary・发光体

2楼-- · 2019-01-18 14:38

I'm not sure it is what you need or if it is possible in your environment but jQuery can accomplish something similar quite easily. Here is a quick jQuery example that might work.

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

Which gives the following console output:

I\'m in a span! 
I\'m in a div! 
I\'m in a paragraph tag!!
p

0人赞添加讨论(0) 举报

SAY GOODBYE

3楼-- · 2019-01-18 14:40

Generally when traversing the DOM, you want to specify a start point. From there, check if the start point has childNodes. If it does, loop through them and recurse the function if they too have childNodes.

Here's some code that outputs to the console using the DOM form of these nodes (I used the document/HTML element as a start point). You'll need to run an if against window.console if you're allowing non-developers to load this page/code and using 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人赞添加讨论(0) 举报

狗以群分

4楼-- · 2019-01-18 14:50

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

you request the first child, which is the text node containing "I\'m in a". The text "aragraph tag!!" is the third child, which is not logged.

Curiously, the last line containing "p" should never occur, because the span element is not a direct child of container.

0人赞添加讨论(0) 举报

Parsing through DOM get all children and values

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间