Scripting for 5th Generation Browsers and Beyond
Retrieving Elements
The two most common methods of retrieving elements based on the W3C
DOM are the document.getElementById() and document.getElementsByTagName()
methods. Both of these methods are important to learn as they form the basis of much of
what follows.
The document.getElementById() method as the name implies retrieves an
element by passing the id as an argument. For example:
<div id="eddieLayer"
style="position:absolute; width:200px; height:115px;
z-index:1; left: 40px; top: 80px; visibility: visible">
This is a CSS Layer with an id of eddieLayer
</div>
would be retrieved with JavaScript by using
theDiv = document.getElementById('eddieLayer').style
We can then utilize the variable theDiv to dynamically
manipulate the style attributes of the <div> tag as indicated below: (live example)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Manipulating a Div Element</title>
<script language="JavaScript" type="text/javascript">
function moveDiv() {
theDiv = document.getElementById('eddieLayer').style;
theDiv.left = 400;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<a href="#" onMouseDown="moveDiv()"> Let's move the div </a>
<div id="eddieLayer"
style="position:absolute; width:200px; height:115px;
z-index:1; left: 40px; top: 80px; visibility: visible">
This is a CSS Layer with an id of eddieLayer
</div>
</body>
</html>
We can also refine the moveDiv() function to a single line of script as such:
function moveDiv() {
document.getElementById('eddieLayer').style.left=400;
}
However, it is often more useful to define a variable for later use, because that
variable can be used repeatedly. For example,
theDiv.left = 400;
theDiv.top = 500;
theDiv.visibility = hidden;
theDiv.width = 350;
By using the document.getElementById() method and adding the style
attributes as in document.getElementById('eddieLayer').style every CSS attribute
of that layer becomes exposed to dynamic manipulation. In short, it provides Web developers
with a range of options when working with Dynamic HTML Web pages which goes beyond just
manipulating a CSS layer.
For instance, let us suppose we wanted to directly manipulate an image element
that is not in a CSS layer, we could use exactly the same methods as above, but with the
provision that we assign a unique id to the image and add the style="position:absolute;
attribute as the next example shows. (live example)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Manipulating a Image</title>
<script language="JavaScript" type="text/javascript">
function moveImage() {
theImg = document.getElementById('dolphin').style;
theImg.left = 400;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<p><a href="#" onMouseDown="moveImage()"> Let's move the image </a></p>
<p><img src="dolphin.jpg" id="dolphin"
style="position:absolute; width="480" height="360"> </p>
</body>
</html>
I can almost see the light switching on in peoples' heads as they begin to realize
the inherent potential of this method. The restriction of the document.getElementById()
method is that it can only be used to access individual elements that have a unique id attribute.
A way to overcome this limitation is the document.getElementsByTagName()
collection. This method takes the tag type as its argument and returns all of the tags of that
particular type in an HTML document. In essence it is a collection method as in returning an array.
For example,
theImg= document.getElementsByTagName("img");
returns all the images in a document regardless of whether they have a name or id
attribute. The following example returns an alert that displays the number of images in the
document as a way of demonstrating how elements are collected by using the
document.getElementsByTagName() method. (live example)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Retrieving How Many Images In a Document</title>
<script language="JavaScript" type="text/javascript">
function getImages(){
theImg= document.getElementsByTagName("img");
alert(theImg.length)
}
</script>
</head>
<body bgcolor="#FFFFFF">
<p><a href="#" onMouseDown="getImages()"> How many
images in this document? </a></p>
<p><img src="dolphin.jpg" width="480" height="360"> </p>
<p><img src="dolphin.jpg" width="480" height="360"> </p>
<p><img src="dolphin.jpg" width="480" height="360"> </p>
</body>
</html>
We can also traverse the DOM tree and target specific page elements. For example,
let's assume that we wanted to obtain the height of the first CSS layer in a document, then
something along these lines could be employed:
getHeight = document.getElementsByTagName('div')[0].offsetHeight;
The [0] in the above line of script is an array index. In JavaScript the 0 value
represents the first element in an array. Consequently, the above line of script would target
the first CSS layer in the document and return its height value. The distinction to make here
is that the document.getElementById() method retrieves elements which have a unique id, where
as the document.getElementsByTagName() method could be used to either target individual elements
that do not have a unique id assigned to them or retrieve a collection of the same tag.
Please note that the offsetHeight and offsetWidth
properties are supported by both IE5+ and NS6 even though they are not a W3C
recommendation.
| 
