Question

60

Parsing through DOM get all children and values

rated 0 times [ 64] [ 4] / answers: 1 / hits: 25644 / 13 Years ago, wed, june 8, 2011, 12:00:00

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

        }

     }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

benitoh

Add To Favorites

Follow

Total Points: 150

Total Questions: 113

Total Answers: 104

Location: India

Member since Wed, Aug 26, 2020

4 Years ago

benitoh questions

1 this.$refs empty with Vue 3 Options API

Sun, Mar 21, 21, 00:00, 3 Years ago

1 Close sidebar menu when click outside of it and when click on menu item

Fri, May 22, 20, 00:00, 4 Years ago

1 TypeORM Custom Repository, select distinct values from specified column

Mon, May 4, 20, 00:00, 4 Years ago

1 How can I enable the console log in VUE-CLI during development

Tue, Dec 17, 19, 00:00, 5 Years ago

1 String interpolation in graphQL query

Mon, May 13, 19, 00:00, 5 Years ago

View All

answered 13 Years ago devinjadong · Accepted Answer

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/