How do I traverse my HTML DOM in firebug?

Question

This seems like it should be really straightforward, but it's got me beat.

I want to be able to explore the DOM tree (visually) in the firebug console, in the same way that I can explore the html page. When I click on the DOM panel (with all options set to 'display'), I can see my jQuery and Javascript objects. (They are highlighted at the top of the list), but I can't see my page nodes (e.g. header div, footer div, h1 elements).

There are other entries such as window, document, etc, which look promising but don't seem to take me anywhere (other than in a loop).

If I select an element in the HTML panel, then on the right hand side of the screen select DOM, it says that 'there are no properties to show for this object'. This doesn't sound right to me either.

What am I missing?

Answer 1

When you go to DOM panel, by default you see properties of window global object. To find your HTML nodes here, you must choose document from windows descendants, then either head or body - and then in each level you can expand further childNodes or children.

Next thing, when you select something in HTML panel, you can right click it and choose "Inspect in DOM panel".

Last but not least, when you have an item, say textarea or input selected in HTML panel, you can refer to it by $0 in Firebug. Then you can inspect all of its DOM properties by writing $0.value etc. Mind the "Show command line popup" button on the left of panels names, which makes it possible to see console and HTML panel at the same time.

Also, you can just go to DOM panel and use Firebug's "Inspect element" button to target on the page, using the mouse, the specific element you want to see in DOM panel.

Answer 2

Go to the DOM button in Firebug. In your search area type in 'document'. Hit the '+' symbol and open it up. Click 'body', and so forth. Everything starts at 'window'.

Hint:

Most of the time window is implicit, so you don't have to say window.document.getElementById();, or even window.onload = function(){*stuff here*/}. You do have to say window.onload if your testing to see if it exists, though. document is a property of window and has a series of its own properties and methods.