Categories: CMS & E-CommerceWeb DevelopmentTutorials

Manipulation of DOM Objects using Firebug

3 min read

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:

Press Ctrl+Shift+C—the shortcut key to open Firebug in inspect mode.
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.
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.
As soon as we do that, Firebug will take us to its DOM tab.

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

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.

<html>
<head>
<script>
function calculateFactorial(num,event){
if(event.keyCode!=13){
return;
}
var fact=1;
for(i=1;i<=num;i++){
fact*=i;
}
alert ("The Factorial of "+ num + " is: " +
fact)
}
</script>
<title>code_6_1.html.html</title>
</head>
<body><font face="monospace">
Enter a number to calculate its factorial
<input type = "text" name="searchBox" 
    onkeyup="calculateFactorial(this.value,event)"/>
</font>
</body>
</html>

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.

Packt