14.13 Getting a Reference to an HTML Element Object

NN 6, IE 5

14.13.1 Problem

You want to derive a valid element object reference starting with the string ID or tag name of an existing element.

14.13.2 Solution

Use the W3C DOM method that has scope over every element in the document:

var elem = document.getElementById("elementID");

If the element doesn't have an id attribute assigned to it, you can reach the element by tag name. The following example retrieves an array of elements with the same tag name:

var elems = document.getElementsByTagName("tagName");

Assuming you know the position of the desired element among all elements with the same tag name, use standard array syntax to obtain a reference to the single element:

var elem = document.getElementsByTagName("tagName")[2];

14.13.3 Discussion

The getElementById( ) method belongs to the document object, so the scope of the method is always the entire document, including head and body sections of an HTML document. In contrast, the getElementsByTagName( ) method can be invoked on any container. This allows you to narrow the scope of the collection. You can also supply an asterisk wildcard character in IE 6 and NN 6 or later to retrieve an array of all element objects:

var allElems = document.getElementsByTagName("*");

How you assign identifiers to repetitive elements can assist for loop scripts that need to work with a series of similar elements. For example, if you use scripts to generate a table dynamically so that script processing is accessing the content of cells in one of the columns, you can assign IDs in sequence, such as subTotal0, subTotal1, and so on. In the function that later loops through the cells in the column, you can use string concatenation in the argument to getElementById( ) to avoid use of the horribly inefficient eval( ) function:

for (var i = 0; i < array.length; i++) {
    ...
    subTotCell = document.getElementById("subTotal" + i);
    ...
}

If you need a reference to an element in earlier browsers, you can use a pair of functions from Recipe 13.3's DHTML API that does the job across browsers and generations:

// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
    var theObj;
    for (var i = 0; i < doc.layers.length; i++) {
        if (doc.layers[i].name =  = name) {
            theObj = doc.layers[i];
            break;
        }
        // dive into nested layers if necessary
        if (doc.layers[i].document.layers.length > 0) {
            theObj = seekLayer(document.layers[i].document, name);
        }
    }
    return theObj;
}
   
// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
    var theObj;
    if (typeof obj =  = "string") {
        if (isW3C) {
            theObj = document.getElementById(obj);
        } else if (isIE4) {
            theObj = document.all(obj);
        } else if (isNN4) {
            theObj = seekLayer(document, obj);
        }
    } else {
        // pass through object reference
        theObj = obj;
    }
    return theObj;
}

To use this pair of functions, invoke getRawObject( ), passing a string of the desired element's ID. For IE 4, the function uses the document.all collection, which contains all elements in the document. For NN 4, however, only positioned elements (layers) are accessible in this manner (not all elements are exposed to the object model in NN 4). In case the NN 4 layer is nested inside another, the getRawObject( ) function invokes the seekLayer( ) function to iterate through all layers and nested layers in search of the one whose id attribute matches the parameter passed to getRawObject( ).

14.13.4 See Also

Recipe 13.3 for complete details about how the DHTML API library uses flexible object references in its dynamic positioning functions.