Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
| Property | Description |
|---|---|
| length | To 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 −
| Method | Description |
|---|---|
| [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. |
| namedItem | To 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 −
<!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;
}
88 Views
