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