Accessing Elements with Script Languages

Article
06/30/2006

In the document object model, every HTML element is a scriptable object with its own set of properties, methods, and events. However, to write script for each element object, you must know how to access the element.

The object model focuses on collections of elements. These collections are a hierarchy of groupings that the elements fall into. The most important of these collections are the all collection and the children collection.

A DHTML document is a structured arrangement of elements. In the following code example, each element has a scope of influence that depends on where in the document the tags appear.

<HTML>
<BODY>
<DIV>
<P>Some text in a <B>paragraph</B>
<IMG id=image1 src="mygif.gif">
</DIV>
<IMG id=image2 src="mygif.gif">
</BODY>
</HTML>

In this example, the div object contains and is the parent of the p object and the img object, called image1. Conversely, the img object called image1 and the p object are both children of the div object. The img object called image2, however, is a child of the body object. All the objects are children of the HTML element.

Each element — that is, object — has an all collection that contains all the elements that are beneath that element in the hierarchy, and a children collection that contains only the elements that are direct descendants of that element. In the preceding example, the b object would be in the div object's all collection, but would not appear in the div object's children collection. Similarly, the div is a member of the body object's children collection, but the p element is not.

In addition to these collections for each element, the document itself, represented by the document object, has a number of element and nonelement collections. The most important collection is an all collection that contains all the elements on the Web page. This collection is the primary way to access elements through script. Examples of HTML and Microsoft JScript® are found in this Microsoft Web site.

The following code example shows how to access all the elements on a Web page through the document.all object.

<HTML>
<HEAD>
    <TITLE>Page Title</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JScript">
    function Loaded()
    {
        var c = document.all.length;
        var i;

        for(i = 0; i < c; i++)
        {
            spanTAGS.innerHTML = spanTAGS.innerHTML +
                document.all.item(i).tagName + "<BR>";
        }
    }
</SCRIPT>

<BODY onload="Loaded()">
    <SPAN id="spanTAGS"></SPAN>
</BODY>
</HTML>

For more information about scripting and using collections, see this Microsoft Web site.

Accessing Elements with Script Languages

See Also

Additional resources