Scripting for 5th Generation Browsers and Beyond - Part I - (3/7) | WebReference

Scripting for 5th Generation Browsers and Beyond - Part I - (3/7)

To page 1To page 2current pageTo page 4To page 5To page 6To page 7
[previous][next]

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.

Contents:

To page 1To page 2current pageTo page 4To page 5To page 6To page 7
[previous][next]


Created: August 16, 2001
Revised: August 16, 2001

URL: http://webreference.com/programming/javascript/domscripting/1/3.html