Adding/removing the DOM elements’ attributes
We can add or remove the attributes (and their values) of an element on the fl y.
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:
- 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.) - 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. - Now we can remove the attribute by pressing Delete or the Backspace key
followed by the Enter key. - We need to open Firebug in inspect mode and choose the element
from DOM. - Now, let’s right-click on the selected element in the HTML tab.
- When we right-click on the DOM element, a context menu will open.
Let’s select the New Attribute… option from it. - Again, the minitext editor will pop up. Let’s start typing the attribute’s name
(in our case “class” is the attribute name). - 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. - Now we can give value to our new attribute.


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

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



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.

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