Can firebug tell me the javascript name of an object?

I've been adding quite a bit of javascript to my pages lately, but have learned it all in classic seat-of-the-pants fashion. When I want my page to do something, I google and experiment until I get the result I want.

I frequently have objects in my pages that I want to activate/deactivate, hide, show, etc., but - having missed the rigorous introduction to javascript - I've no idea how these things get named. I click on objects with firebug open, expecting to see some fully-qualified name for the object, but get no joy. I just need to be able to do something like form.button.value="something", and need to know the name of that object.

Any ideas?

Thanks.

Solution

Whilst you are running Javascript code, you have all the local variables in the current scope, so if you had the following code:

var myObject = New Object();
myObject.Person = New Object();
myObject.Person.Name = "Mark";
myObject.Person.Gender = "Male";
myObject.Name = "object1";

... your root object would be myObject, and you refer to descendent objects through the dot notation.

However, thanks to the implementation of the DOM in the browser, you also inherit the window object via the this keyword. In fact, you can leave the this keyword out for simple situations i.e. when you are not using closures. Therefore, you can access Javascript functions at the top level by just using the function name.

If you want to access specific elements, like it sounds like you are wanting, you need to learn the DOM, and not use the syntax that you were suggesting (that sounds like 1990s Javascript). The root element you need to know is the HTMLDocument object, accessed via the document property. You can discover elements with specific Id (not Name) attributes by using the getElementById method of the document element. Of course, it helps if you've given your element an unique Id from the start. You can also recursively use the childNodes collection to iterate manually through elements until you find what you want. Alternatively, if you really can't supply an Id, you could also use the getElementsByTagName method, which is attached to every element in the DOM.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
    <TITLE></TITLE>
    <META NAME="Generator" CONTENT="TextPad 4.6">
    <META NAME="Author" CONTENT="?">
    <META NAME="Keywords" CONTENT="?">
    <META NAME="Description" CONTENT="?">
    <SCRIPT LANGUAGE="Javascript">
        <!--

        function DoSummat()
        {
            var divInside = document.getElementById("Inside");
            divInside.textContent = "This text will appear inside.";
        }

        //-->
    </SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
<FORM>
    <INPUT TYPE="BUTTON" onclick="DoSummat();" NAME="MyButton" VALUE="Press Me">
</FORM>
<DIV ID="Outside">
    <DIV ID="Middle">
        <DIV ID="Inside"></DIV>
    </DIV>
</DIV>
</BODY>
</HTML>