« Return

DOM - the Images array

The DOM images array contains information about the images for the given web page.

To navigate the DOM's image array, you can use a FOR loop that starts at element zero of the array, and continues until it reaches the end of the array. The array's "length" property tells us how many elements the array has, and therefore tells us where the end of the array is. For each of the image array elements, we can display various characteristics of each image, by querying the DOM:

---

Code:

<script type="text/javascript">
//<![CDATA[

/*
Determine the current length of the images array, because the code will add images to the array, and we need to capture the current length of the array, so as to avoid an infinite loop in the "for" loop:
*/

original_images_array_length = window.document.images.length;

for(i=0; i<original_images_array_length; i++)
{

document.write("<h5>This is images[", i, "] :</h5>")

if (window.document.images[i].src)
{
 document.write("<img src='" + window.document.images[i].src + "'><br />");

 document.write("<h5>This is info from the DOM for images[", i, "] :</h5>");
 document.write("<strong>image source (path): </strong>images[", i, "].src is '", window.document.images[i].src, "'.<br /><br />");
}
else
{
 document.write("<strong>image source (path): </strong>images[", i, "].src has no value.<br /><br />");
 document.write("<h5>This is info from the DOM for images[", i, "] :</h5>");
}

if (window.document.images[i].align)
{ document.write("<strong>image alignment: </strong>images[", i, "].align is '", window.document.images[i].align, "'.<br /><br />"); }
else
{ document.write("<strong>image alignment: </strong>images[", i, "].align has no value.<br /><br />"); }

if (window.document.images[i].name)
{ document.write("<strong>image name: </strong>images[", i, "].name is '", window.document.images[i].name, "'.<br /><br />"); }
else
{ document.write("<strong>image name: </strong>images[", i, "].name has no value.<br /><br />"); }

if (window.document.images[i].width)
{ document.write("<strong>image width: </strong>images[", i, "].width is '", window.document.images[i].width, "'.<br /><br />"); }
else
{ document.write("<strong>image width: </strong>images[", i, "].width has no value.<br /><br />"); }

if (window.document.images[i].height)
{ document.write("<strong>image height: </strong>images[", i, "].height is '", window.document.images[i].height, "'.<br /><br />"); }
else
{ document.write("<strong>image height: </strong>images[", i, "].height has no value.<br /><br />"); }

document.write("<hr />");
}
//]]>
</script>

« Return

---

©2012 Kroll Design    info@KrollDesign.net    781.910.3694