Manipulation of DOM Objects using Firebug

Inspecting DOM

The DOM inspector allows for full, in-place editing of our document structure, not just text nodes. In the DOM inspector, Firebug auto completes property value when we press the Tab key. The following are the steps to inspect an element under the DOM tab:

  1. Press Ctrl+Shift+C—the shortcut key to open Firebug in inspect mode.
  2. Let's move the mouse pointer over the HTML element that we want to inspect and click on that element. The HTML script of that element will be shown in Firebug's HTML tab.
  3. Right-clicking on the selected DOM element will open a context menu. Let's select the Inspect in DOM Tab option from the context menu.
    DOM manipulation using Firebug 1.5
  4. As soon as we do that, Firebug will take us to its DOM tab.
    DOM manipulation using Firebug 1.5

Filtering properties, functions, and constants

Many times we want to analyze whether a function written by us is associated with an HTML element. Firebug provides us an easy way to figure out whether an event, listener, function, property, or constants are associated with a particular element.

The DOM tab is not only a tab but also a drop-down menu.

When we click on the down arrow icon on the DOM tab, Firebug will show a drop-down list from which one can select the filtering options and inspect the element thoroughly. The following are the options provided by this menu:

  • Show User-defined Properties
  • Show User-defined Functions
  • Show DOM Properties
  • Show DOM Functions
  • Show DOM Constants
  • Refresh

    DOM manipulation using Firebug 1.5

There are two kinds of objects and functions:

  • Part of the standard DOM
  • Part of our own JavaScript code

Firebug can notify the difference, and shows us our own script-created objects and functions in bold at the top of the list.

  • The text that is bold and green is a user-defined function.
  • The text that is bold and black is a user-defined property.
  • The text whose size is normal and is green in color is a DOM-defined function.
  • The text whose size is normal and is black in color is a DOM-defined property.
  • The upper case letters (capital letters) are the DOM constants.

We can see the actual colored depiction in Firebug's DOM tab.

In the following code, the onkeyup() event is a user-defined function for <input/> and calculatefactorial() is a user-defined function for the current window. To test this code, let's type the code in an HTML file, open it with Firefox, and enable Firebug by pressing the F12 key. Inspect the input element in the DOM.

function calculateFactorial(num,event){
var fact=1;
alert ("The Factorial of "+ num + " is: " +
<body><font face="monospace">
Enter a number to calculate its factorial
<input type = "text" name="searchBox"
DOM manipulation using Firebug 1.5

Intuitive DOM element summaries
There are many different kinds of DOM and JavaScript objects, and Firebug does its best to visually distinguish each, while providing as much information as possible. When appropriate, objects include brief summaries of their contents so that we can see what's there without having to click. Objects are color coded so that HTML elements, numbers, strings, functions, arrays, objects, and nulls are all easy to distinguish.

Modifying DOM on the fly

There are lots of great features of Firebug, one of them being editing the DOM element's properties and constants on the fly.

It's no fun to just look at the DOM; many times we want to change it. The reason for changing it could be related to debugging JavaScript. Consider a scenario where we have an <input/> element in our DOM whose disabled attribute is set to true (that is, the input box is locked and no event would be fired for that element). Now, we have written a JavaScript code that expects the <input/> element is not disabled. Firebug notifies us on the error console that this particular element is disabled and access to the element is denied. What will we do here?

We can edit our source code and reload the page to test the JavaScript code or inspect the <input/> element by double-clicking the white space of the row in the tree where the disable attribute is written. Firebug is smart enough to toggle between true and false. Therefore, if the value for disable is true, Firebug will automatically make it false.

If the property or constant value is string/integer/decimal type (that is, non-Boolean) then a little editor will appear that will let us change the value of the variable in question.

DOM manipulation using Firebug 1.5

Never forget
The DOM editor is a miniature JavaScript command line. This means we can write any JavaScript expression we want. When we press Enter, the expression will be evaluated and the result will be assigned to the variable.


Editing the DOM is a lot easier with auto-complete. Using the Tab key we can complete the name of object properties. Keep hitting it to cycle through the complete set of possibilities, and use Shift+Tab to go backwards. As the mini editor on the DOM tab is a JavaScript command line, we can always enjoy the auto-complete feature while editing the values in the DOM tab. Auto-complete works like a charm at many levels. We can start pressing the Tab key before we type anything to cycle through global variables. We can press the Tab key after typing document.b to cycle through all properties that start with b. We can even press the Tab key after a complex expression such as document.getElementsByTagName('a')[0] to see all properties of the first link in the document.

Sometimes while editing a value, we may realize that it is not supposed to be edited. In this case simply use the Esc key to cancel editing.

Losing the starting element

Some of the properties of the DOM tree are expandable. We can see a + symbol next to some properties. If we click on the + (expandable column) of the explorer, Firebug will expand the object within the current view, but if we want to give an object the full view, just click the link (that appears in the right column) to the object

DOM manipulation using Firebug 1.5

Each time we click an object, Firebug will append to the path in the toolbar. That shows us the breadcrumb trail of properties that were accessed on the way to locating that object. We can click any part of the path to jump back to it.

Adding/removing the DOM elements' attributes

We can add or remove the attributes (and their values) of an element on the fly. And for doing this we don't need to dig in the DOM tab. Adding and removing the attributes of any element in the DOM is very simple. Let's see an example of how to add/remove the elements' attributes.

Here we used as a sample to discuss adding and removing attributes.

Removing attributes

To remove attributes from a particular DOM element, just follow these steps:

  1. First, let's open Firebug in inspect mode by pressing Ctrl+Shift+C, and then select the element whose attributes are to be altered. (In our case we will choose the big input box of Google.)
    DOM manipulation using Firebug 1.5
  2. Let's drag our mouse pointer over the selected element in the HTML tab and click on the attribute that we want to remove. As soon as we do that, a mini text editor will pop up.
    DOM manipulation using Firebug 1.5
  3. Now we can remove the attribute by pressing Delete or the Backspace key followed by the Enter key.

If at any point we don't want to remove/modify the attribute, we can always press the Esc key to cancel modifications.

DOM manipulation using Firebug 1.5

Adding attributes

Adding new attributes to any DOM element is very simple. To add attributes from a particular DOM element, just follow these steps:

  1. We need to open Firebug in inspect mode and choose the element from DOM.
  2. Now, let's right-click on the selected element in the HTML tab.
  3. When we right-click on the DOM element, a context menu will open. Let's select the New Attribute... option from it.
    DOM manipulation using Firebug 1.5
  4. Again, the mini text editor will pop up. Let's start typing the attribute's name (in our case "class" is the attribute name).
    DOM manipulation using Firebug 1.5
  5. Press the Tab key to input the value of this attribute. When we press the Tab key, our smart Firebug automatically adds an equal symbol = between the attribute's name and value.

    DOM manipulation using Firebug 1.5
  6. Now we can give value to our new attribute.

If we want to continue adding more attributes, Firebug provides a very easy way for doing this. All we need to do is press the Tab key when we are done with the attribute's value part.

JavaScript code navigation

The DOM tree explorer is also a great way to find JavaScript functions that we wish to debug. If we click on a function in the DOM explorer, Firebug will take us right to the Script tab and highlight that function.

DOM manipulation using Firebug 1.5

Now in Script tab, we can insert conditional/unconditional breakpoints in that function and debug our code.

If we move our mouse pointer over the function name on the DOM tree, then it will show a preview of the code that is written inside the definition of the function.


Let's recall what we discussed in this article. DOM is just a big hierarchy of objects. Objects can be HTML objects or JavaScript objects. We saw how Firebug shows the difference between user-defined and DOM-defined properties and functions. We can also filter the DOM tree by simply selecting the drop-down options from the list in the DOM tab.

We discussed how we can modify/edit the values of properties and constants of any DOM object. We also saw how smart Firebug is in differentiating between values of different properties based on their types, such as String, Boolean, and so on.

We also saw how Firebug helps us to easily add and remove the attributes of any particular DOM element.

If you have read this article you may be interested to view :

You've been reading an excerpt of:

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Explore Title