Manipulation of DOM Objects using Firebug

Exclusive offer: get 50% off this eBook here
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages — Save 50%

Arm yourself to destroy UI and JavaScript bugs

$20.99    $10.50
by Chandan Luthra Deepak Mittal | April 2010 | Open Source Web Development

In this article by Chandan Luthra and Deepak Mittal, authors of Firebug 1.5: Editing, Debugging, and Monitoring Web Pages, we will have a small introduction to DOM as well as discussing how to modify/edit values of properties and constants of any DOM object using Firebug.

Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML. DOM supports navigation in any direction (such as parent and previous sibling) and allows for arbitrary modifications. Through JavaScript, one can easily traverse within the DOM. Browsers rely on layout engine (for example, Gecko, Trident/MSHTML, Presto, and so on) to parse HTML into DOM. In other words, DOM is a huge hierarchy of objects and functions, just waiting to be tickled by JavaScript. Firebug helps us find DOM objects quickly and then edit them on the fly. We will be discussing the following features of Firebug in this article:

  • Inspecting DOM
  • Filtering properties, functions, and constants
  • Modifying DOM on the fly
  • JavaScript code navigation

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.

<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>
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.

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages Arm yourself to destroy UI and JavaScript bugs
Published: April 2010
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

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.

Auto-complete

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 http://www.google.com 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.

Summary

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 :


Firebug 1.5: Editing, Debugging, and Monitoring Web Pages Arm yourself to destroy UI and JavaScript bugs
Published: April 2010
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Chandan Luthra

Chandan Luthra is an agile and pragmatic programmer, and an active participant at the local open source software events, where he evangelizes about Firebug, Groovy, Grails, and JQuery. He is a Linux and open source enthusiast. He also involves himself in writing blogs, articles, and is an active member on various tech-related mailing lists. He has developed web apps for various industries, including entertainment, finance, media and publishing, as well as others.

He loves to share his knowledge and good coding practices with other team members in order to perfect their development skills. In his free time, he loves to contribute to open source technologies.

He also loves to code in JQuery with Firebug, which makes development very easy for him. He is a fond lover of Firebug and has been using it since 2007 and co-authored a book on Firebug 1.5 with Packt Publishing in the year 2010.

Deepak Mittal

Deepak Mittal is a software developer based in New Delhi, India, and he has been involved with software engineering and web programming in Java/JEE world since the late 1990s. Deepak is a Linux and open source enthusiast. He is an agile practitioner and speaks about open source, agile processes, and free software at various user group meetings and conferences. He has designed and built web applications for industries including pharmaceutical, travel, media, and publishing, as well as others. He loves to explore new technologies and has been an early-adopter of quite a few mainstream technologies of today's world.

In early 2008, he co-founded IntelliGrape Software, an agile web application development company focused on Groovy and Grails. At IntelliGrape, he has been occupied with building world class applications on Grails and also mentors and trains other team members.

Deepak is a veteran user of Firebug and has been using it since 2006.

Books From Packt


jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

CMS Made Simple 1.6: Beginner's Guide
CMS Made Simple 1.6: Beginner's Guide

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

CodeIgniter 1.7 professional development
CodeIgniter 1.7 professional development

Plone 3.3 Multimedia
Plone 3.3 Multimedia

Django 1.1 Testing and Debugging
Django 1.1 Testing and Debugging

AJAX and PHP: Building Modern Web Applications 2nd Edition
AJAX and PHP: Building Modern Web Applications 2nd Edition


Your rating: None Average: 4 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
D
T
a
C
H
S
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software