Firebug 1.5

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

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

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

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

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


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.

Pages: 1 2 3

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share this post with your friends!