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:

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





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.





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.







Adding attribute




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.







4. Again, the minitext editor will pop up. Let’s start typing the attribute’s name
   (in our case “class” is the attribute name).





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.





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.

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.