JavaScript Document Object Collection

As you know that the document object acts as a collection of objects. A collection is defined as an array of related objects. This array of objects provides a convenient way to refer to a related group of objects as a single object.

The following table lists down the collection elements of the document object in JavaScript:

Collection	Description
anchors	refers to an array that returns all the anchor objects of an HTML document
forms	refers to an array that returns all the form objects of an HTML document
images	refers to an array that returns all the image objects of an HTML document
links	refers to an array that returns all the objects of a document

JavaScript Document Object Collection Example

Here is an example demonstrates document object collection in JavaScript:

<!DOCTYPE HTML>
<html>
<head>
   <title>JavaScript Document Object Collection</title>
</head>
<body>

<h3>JavaScript Document Object Collection Example</h3>
<h3>Counting the IMG Elements</h3>
   <img src="color1.jpg" alt="color 1" width="80" height="70"><br/>
   <img src="color2.jpg" alt="color 2" width="80" height="70"><br/>
   <img src="color3" alt="color 3" width="80" height="70"><br/>
   <p>This document contains total <b>
   <script type="text/javascript">
      document.write(document.images.length+" ")
   </script></b>
   IMG elements.</p>

</body>
</html>

Here is the sample output produced by above JavaScript document object collection example code:

JavaScript Online Test

« Previous Tutorial Next Tutorial »