HTML DOM embeds collection


The HTML DOM embeds collection is used for returning the number of objects that are present in the embeds [] array in our HTML document. The elements in the collection are present in the same order as they appear in the HTML document.

Properties

Following is the property for the embeds collection −

PropertyDescription
lengthTo return the number of <embed> elements present in the collection. You can’t change this property value as it is read-only.

Methods

Following are the methods for the embeds collection −

MethodDescription
[index]To return the <embed> element in the collection with the given index.Indexing starts at 0 and null is returned if the index number is out of range.
item(index)To return the <embed> element from the collection with the given index.Indexing starts at 0 and null is returned if the index number is out of range.
namedItemTo return the <embed> element from the collection that has the given id associated with it. Null is returned if the given id doesn’t exist.

Syntax

Following is the syntax for the embeds collections −

document.embeds

Example

Let us look at an example for the HTML DOM embeds collection minus;

<!DOCTYPE html>
<html>
<head>
<style>
   .EMB{
      width:200px;
      height:200px;
      border:4px solid blue;
   }
</style>
</head>
<body>
<h1>Embeds collection example</h1>
<p>Get the number of embeds element in this document by clicking the below button.</p>
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">
<br><br>
<button onclick="embedsNo()">GET COUNT</button>
<p id="Sample"></p>
<script>
   function embedsNo() {
      var e = document.embeds.length;
      document.getElementById("Sample").innerHTML ="The number of embed elements in this document are " + e;
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the GET COUNT button −

In the above example −

We have created two embed elements having a css style applied to them based on their common class attribute value −

.EMB{
   width:200px;
   height:200px;
   border:4px solid blue;
}
<embed class="EMB" src="Text-collection.pdf">
<embed class="EMB" src="Text-collection.pdf">

We have then created the GET COUNT button that will execute the embedsNo() method on being clicked by the user −

<button onclick="embedsNo()">GET COUNT</button>

The embedsNo() method gets the embeds.length attribute value and assigns it to variable e. Since there are only two <embed> elements in our document the embeds.length will return 2.

This value is then displayed in the paragraph with id “Sample” and setting its innerHTML property value to the intended text −

function embedsNo() {
   var e = document.embeds.length;
   document.getElementById("Sample").innerHTML ="The number of embed elements it this document are " + e;
}
raja
Published on 08-Aug-2019 14:29:46
Advertisements