How to convert from recursive function to loop(for while etc) in DOM(Javascript)

Question

I got this code while searching, however, I would like it to convert from recursive function to loop using for or while etc. This code is about selecting all childnodes of Body in DOM(Javascirpt) and print on console.

<script>
function traverse(target, callback){
    if(target.nodeType === 1){
        callback(target);
        var c = target.childNodes;
        for(var i=0; i<c.length; i++){
            /* recursive function here */
            traverse(c[i], callback);       
        }   
    }
}
traverse(document.querySelector('body'), function(elem){
    console.log(elem);
});
</script>

Could you give me some tips? Thanks in advance:)

The main idea of having a recursion is, usually, the fact that you don't know the depth of it. So if you know how deep can go target.childNodes, you can use for instead, but it will be for(for(... The other thing, is for better readability you can use this.childNodes.forEach(callback); — Animus
– Animus, Commented Nov 6, 2019 at 9:51
For your goal here, document.querySelectorAll( 'body *' ).forEach( console.log ) would do the trick as well. — somethinghere
– somethinghere, Commented Nov 6, 2019 at 9:53
The reason you need recursion for something like this is, like Animus said, you don't know how deep this rabbit hole goes, so you need to be able to call the function for as long as there are deeper layers to explore. A while loop would not allow this, as going back up the tree to the next element isn't exactly easy in such a situation. — somethinghere
– somethinghere, Commented Nov 6, 2019 at 9:58
You are welcome. somethinghere gave a better advice I think. Which is selecting every element with particular selector, however, you should have a selector, or their collection for it. — Animus
– Animus, Commented Nov 6, 2019 at 9:58
One can only loop a pre-defined array. As you don't know anything about the hierarchy of the elements, you can't iterate over them with a loop — GalAbra
– GalAbra, Commented Nov 6, 2019 at 9:59

Eriks Klotins · Accepted Answer · 2019-11-06 10:14:11Z

1

You can query the target element for all its children and iterate over them

function traverse(target, callback)
{
   var nodes = target.getElementsByTagName('*');
   callback(target);
   for(var i=0;i<nodes.length;i++)
   {
      callback(nodes[i]);
   }

}

answered Nov 6, 2019 at 10:14

Eriks Klotins

4,1701 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to convert from recursive function to loop(for while etc) in DOM(Javascript)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related