DOM stack trace find all the DOM Objects and list them out

Question

Is there a tool/utility I can attach to a browser that can literally scan over all the objects on a given page and spit out a readable stack of elements? Or is there a means I can even make one with jQuery or something?

What I want to have or do is find literally all the elements between the body tags and list them out grouping them where ever possible. So I can build a document for my team and keep track of whats where, etc for down the road when we need to revisit stuff.

All the DOM inspectors will allow you to view the entire DOM hierarchy. Chrome, Safari and Opera have a DOM inspector built-in. Firebug is an add-on for Firefox. I don't know of a tool that lets you print it. — jfriend00, Dec 19 '11 at 21:26

score 1 · Answer 1 · answered Dec 19 '11 at 21:26

1

Most browsers have developer tools. Press F12 in IE and Chrome, not sure for Firefox.

enter image description here

answered Dec 19 '11 at 21:26

Ash Burlaczenko

24,778
15
68
99

score 1 · Answer 2 · answered Dec 19 '11 at 21:27

1

Firebug, Firefox tool bar, IE tool bar (F12), Chrome Dev tools (F12 again...), there's lots and lots of DOM inspector tools out there (or already built in the browser)

answered Dec 19 '11 at 21:27

Mike Sav

14,805
31
98
143

score 1 · Accepted Answer · edited May 23 '17 at 12:11

If you'd just like a list of all the elements on the page (and their children up to one level), try this:

$("body").find("*").each(function(){
    document.write( this.nodeName.toLowerCase() + "<br>" )
    if( $(this).children().length > 0 ){
        $(this).children().each(function(){
            document.write( "<ul>" );
            document.write( "<li>" + this.nodeName.toLowerCase() + "</li>" );
            document.write( "</ul>" );
        }); 
    }
});

Example.

However, this answer provides a much better method and lists all of an element's children.

score 1 · Answer 4 · answered Dec 19 '11 at 22:00

The developer tools built into most browsers will show you the entire DOM in its current state. You can also live edit the DOM (both structure and CSS).

A couple other handy tidbits of info:

In Chrome (and I believe also Firebug) you can click on an element in the DOM (so it is highlighted), then in the console view, whatever you selected can be reached with '$0'. They also include a nice copy() function which puts that DOM text onto the clipboard, ready to be pasted into a text editor:

In "Elements view, click an element (e.g. the <body> tag).
Click over to Console
```
copy($0)
```
Open a text-editor, and paste.

DOM stack trace find all the DOM Objects and list them out

4 Answers4