ansaurus

Question

DOM traversal one by one node using jquery

Answer 1

+1 A:

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

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

Nick Craver 2010-09-09 14:01:53

@downvoter - care to comment?

Nick Craver 2010-09-09 14:07:54

This has two down-votes. I'm curious as well since the answer is correct. Down-voters should be decent and explain why.

patrick dw 2010-09-09 14:10:50

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 2010-09-09 14:16:53

This doesn't include `<body>`.

Roatin Marth 2010-09-09 14:21:11

@Roatin - Why didn't you say so? Updated.

Nick Craver 2010-09-09 14:22:56

@Nick: what makes you think I downvoted? ;)

Roatin Marth 2010-09-09 14:25:12

Well, +1 if for no other reason than the fact that you nearly *always* give constructive comments in lieu of a down vote.

patrick dw 2010-09-09 14:31:11

Answer 2

+2 A:

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

patrick dw 2010-09-09 14:10:09

-1 Not enough jQuery.

Roatin Marth 2010-09-09 14:21:46

(I'm kidding)..

Roatin Marth 2010-09-09 14:22:17

@RoatinMarth lol

Ninja Dude 2010-09-09 14:35:00

Answer 3

A:

Simple.

function walk(node, fn) {
    if (node) do {
        fn.call(node);
        if (node.nodeType === 1) walk(node.firstChild);
    } 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.call(node);
            walk(node.firstChild);
        }
    } while (node = node.nextSibling);
}

J-P 2010-09-09 14:41:54

ansaurus

tags:

views:

answers:

DOM traversal one by one node using jquery

related questions