Another Way to Access an Element

by Ryan Frishberg

We can access an element (e.g., a layer) by it's ID with document.getElementById(ID). We can also access element nodes with document.getElementsByTagName(tagName). That returns an array of elements with that tagName.

Example: document.getElementsByTagName("TD").item(0)

In the example, we grab the first table cell (<td> tag) in the document. To get an array of all tags in the document, we can use:

document.getElementsByTagName("*")

So, to access the <body> tag, we can use: document.getElementsByTagName("BODY").item(0)

Not so fast...

Before applying the information provided in the past two sections, it's important to recognize two caveats. (I gratefully acknowledge the contribution of a colleague, Patrick Brennan, for pointing these out.)

1. You cannot realistically reference document nodes by anything other than the id attribute in HTML (XML is OK). IE5 and NS6 both insert spurious text nodes between the ones you have written (NS6 more than IE5).

2. elements cannot be stacked according to the HTML 4.01 specification. As stated by the Consortium, "The P element represents a paragraph. It cannot contain block-level elements (including P itself)."

What he means is that it's really unrealistic to access an element by using it's relation to another one (with parentNode, firstChild, previousSibling, etc...). And lastly, he is saying that elements should not be contained within another element.

On to the example

Let's look at an example of referencing each element in different ways. Consider this page:

Now, we can access the ol1 tag by a number of ways (remember, these may be
ineffective because of "spurious text nodes"):

document.getElementById("ol1")
document.getElementsById("li1").parentNode
document.getElementsByTagName("ol").item(0)
document.getElementsByTagName("li").item(0).parentNode
document.getElementsByTagName("li").item(1).parentNode
document.getElementsByTagName("l1").item(2).parentNode
document.getElementsByTagName("span").item(2).parentNode.parentNode
document.getElementsByTagName("body").item(0).childNodes.item(0)
document.body.childNodes.item(0)

Because we'll probably access the <body> tag a lot, we can use a shortcut (rather than using it's tagName like this: document.getElementsByTagName("BODY").item(0) or by assigning it an ID and using that):

document.body as used above.

To access l2, we could use:

document.getElementById("l2")
document.getElementById("l1").nextSibling
document.getElementById("l3").previousSibling
document.getElementsByTagName("li").item(1)
document.getElementsByTagName("span").item(1).parentNode
document.getElementsByTagName("span").item(2).parentNode.previousSibling
document.getELementsByTagName("ol").childNodes.item(1).parentNode.childNodes.item(1).parentNode.childNodes.item(1)
document.getElementsByTagName("body").item(0).firstChild.firstChild.nextSibling
document.body.childNodes.item(0).lastChild.previousSibling

Try to find the text node containing the following text--"This is Text 3."

We could find it by first accessing span3, and then accessing it's firstChild. Example:

document.getElementById("span3").firstChild

Before, I said attributes were somewhat nodes. This is why they don't show up when you try to access an element's child nodes. Later, we'll look at how to change, set, and remove attributes; but before that, let's move on to some other essentials we can access from an element node.

Next -->