DOM Image Collection
DOM Basic Collections – Part 1
Forward: In this part of the series, we look at the DOM Image Collection.
By: Chrysanthus Date Published: 30 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Prerequisite
You should have basic knowledge in HTML DOM before reading this series.
Syntax for Image Collection
To obtain a collection of all the images in an html document, you would type:
document.images
You begin with the reserved word, document, followed by a dot and then followed by the reserved word, images, in plural. In other words, you access the html document first before accessing all the images. The returned value of the expression is an array of all the images in the document. You can then use the array to access the individual images.
If you do not want to use the return value as an array to access the individual images, you can use the expression directly, appending [] to the end of the expression; like so:
document.images[]
Inside the [] brackets you type the index of the image in the collection, if you know it. A collection is generally used to access all the elements of the same type in one run. If you want to access only one particular element, then use the expression, document.getElementById('ID').
The length Property
The image collection or array has the length property. You, the coder, uses the length property to know how many images are in the document (array). Read and try the following code, which gives the total number of images in the document.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body style="background-image:url(image0.bmp)">
<image src="image1.bmp" id="I1">
<image src="image2.bmp" id="I2">
<script type="text/ECMAScript">
imgColtion = document.images;
alert(imgColtion.length);
</script>
</body>
</html>
Note that the expression, imgColtion.length, was used as argument inside the alert function call. This kind of thing is allowed in ECMAScript function call.
Also read and try the following code, which uses the expression, “document.images”.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body style="background-image:url(image0.bmp)">
<image src="image1.bmp" id="I1">
<image src="image2.bmp" id="I2">
<script type="text/ECMAScript">
alert(document.images.length);
</script>
</body>
</html>
Note the use of the expression, document.images.length, as argument in the alert function call. That is allowed in ECMAScript.
The images collection is an array having the references of the images in the html document. However, the reference of the background image is not included in the images collection. That is why the length in the above two code samples is 2 and not 3.
Use of the Square Brackets
The square brackets are used in a similar way they are used with arrays. However, here, they can be preceded by an expression. Read and try the following code, which changes the border of the image at index position 1, in the collection:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body style="background-image:url(image0.bmp)">
<image src="image1.bmp" id="I1">
<image src="image2.bmp" id="I2">
<script type="text/ECMAScript">
imgArr = document.images;
imgArr[1].style.border = "4px solid blue";
</script>
</body>
</html>
The following code is the same as the above but, the expression, document.images, is used directly with the square brackets:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body style="background-image:url(image0.bmp)">
<image src="image1.bmp" id="I1">
<image src="image2.bmp" id="I2">
<script type="text/ECMAScript">
document.images[1].style.border = "4px solid blue";
</script>
</body>
</html>
When you have the collection of image references in an html document, you can use any of the references (by index) to get the ID attribute value of the image. You can also use a reference to get or set the src attribute value of an image. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body style="background-image:url(image0.bmp)">
<image src="image1.bmp" id="I1">
<image src="image2.bmp" id="I2">
<script type="text/ECMAScript">
myID = document.images[0].id;
alert(myID);
</script>
</body>
</html>
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT