5

I wanted to traverse node by node on a web page by maintaining sequence.

e.g. Below is basic DOM :

<BODY>
     <DIV id ='1'> Test 1 </DIV>
     <DIV id='2'> Details about <SPAN id='3'> Execution </SPAN> </DIV>   
</BODY>

As per above example I want traverse each node by node i.e.

1st Traversal : <BODY>

2nd Traversal : <DIV id ='1'>

3rd Traversal : <DIV id='2'>

4rd Traversal : <SPAN id='3'>

My motive is to loop over all the nodes available on current page and visit each node one by one saying simply nextnode(), while traversing not looking in to parent and child relations. Exepcted is, it should visit each node by following sequence.

So my statement will be like this :

startnode //consider this is start node

While ( startnode!=null ) {

  // will process on startnode

   startnode= startnode->nextnode();
  // something like that to visit each node
}

Is any one knows about this, how to achieve this using jquery(preferably) or javascript, please share their references.

Thanks

-Pravin

6
  • 1
    @pravin Are you looking for $('*') ?
    – user372551
    Sep 9, 2010 at 13:59
  • @Avinash : M sorry, can you bit explore this....do u mean to say is all nodes on page...
    – pravin
    Sep 9, 2010 at 14:01
  • 1
    In $('*'), " * " selector is used to select Every node on your page.
    – user372551
    Sep 9, 2010 at 14:04
  • I think it wont select text Node...like in above example innerHTML of <div id='1'> i.e. Test 1. Here it will jump prper nodes like <body>,<div>,<div>,<span>. How do i achieve if i want : <body> , <div>, Test 1, <div>,Details about, <SPAN>, Execution is this possible ?
    – pravin
    Sep 9, 2010 at 14:08
  • @pravin - You can get the content of those nodes while you're iterating over them, but your example does not have the text node, you should update the question for exactly what you're after. Sep 9, 2010 at 14:11

3 Answers 3

14

There's always the standard Crockford walk the dom method.

Example: http://jsfiddle.net/FJeaY/

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

walk_the_DOM(document.body, function(node) {
    if(node.nodeType == 1)
        alert(node.id);  // alert if we have a type 1 node
})​;​

Specific walk_the_DOM code example copied from here: http://snipplr.com/view/19815/walking-the-dom/

EDIT: Text nodes have nodeType = 3, so you can add that to your if() statement if those are desired as well.

walk_the_DOM(document.body, function(node) {
    if(node.nodeType == 1 || node.nodeType == 3)
        alert(node.id);  // ID will be undefined if it is a text node
})​;​
1
  • great recursive code for traverse parent to child in DOM tree
    – Girish
    Nov 6, 2014 at 10:39
12

You can loop through with a body and all selector, like this:

$("body").find("*").andSelf().each(function() {
    alert(this.nodeName); //alerts body, div, div, span
});​

Note: andSelf has been deprecated and is now an alias for addBack(), which should be used with jQuery 1.8 and later

You can give it a try here, the body portion is so you don't get the <head> and it's contents, etc.

5
  • This has two down-votes. I'm curious as well since the answer is correct. Down-voters should be decent and explain why.
    – user113716
    Sep 9, 2010 at 14:10
  • exactly...this answer seems good ...please add comment who down-votes, so i also come to know is there any other reason to mark like that....
    – pravin
    Sep 9, 2010 at 14:16
  • This doesn't include <body>. Sep 9, 2010 at 14:21
  • @Roatin - Why didn't you say so? Updated. Sep 9, 2010 at 14:22
  • Well, +1 if for no other reason than the fact that you nearly always give constructive comments in lieu of a down vote.
    – user113716
    Sep 9, 2010 at 14:31
1

Simple.

function walk(node, fn) {
    if (node) do {
        fn(node);
        if (node.nodeType === 1) walk(node.firstChild, fn);
    } while (node = node.nextSibling);
}

Usage:

walk(document.body, function(){
    // do something with `this`
    // e.g.
    alert(this.id);
});

And to avoid non-element nodes, this will work:

function walk(node, fn) {
    if (node) do {
        if (node.nodeType === 1) {
            fn(node);
            walk(node.firstChild, fn);
        }
    } while (node = node.nextSibling);
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.