Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to work with document.embeds in JavaScript?
The document.embeds property in JavaScript provides access to all <embed> elements in an HTML document. It returns an HTMLCollection containing all embed elements, which is useful for managing embedded content like videos, audio files, or plugins.
Syntax
document.embeds document.embeds.length document.embeds[index] document.embeds.namedItem(name)
Basic Example
Here's how to count and access embed elements in a document:
<!DOCTYPE html>
<html>
<head>
<title>Document Embeds Example</title>
</head>
<body>
<embed src="/html/sample.mp3" width="300" height="50">
<embed src="/html/video.mp4" width="400" height="300">
<script>
// Get total number of embed elements
var embedCount = document.embeds.length;
console.log("Number of embed elements: " + embedCount);
// Access individual embed elements
for (let i = 0; i < document.embeds.length; i++) {
console.log("Embed " + (i + 1) + " src: " + document.embeds[i].src);
}
</script>
</body>
</html>
Number of embed elements: 2 Embed 1 src: /html/sample.mp3 Embed 2 src: /html/video.mp4
Properties and Methods
The document.embeds collection provides several useful properties:
<!DOCTYPE html>
<html>
<body>
<embed id="audio1" src="/html/music.mp3" width="250" height="50">
<embed name="mainVideo" src="/html/demo.mp4" width="400" height="250">
<script>
// Length property
console.log("Total embeds: " + document.embeds.length);
// Access by index
console.log("First embed src: " + document.embeds[0].src);
// Access by name (if embed has name attribute)
var namedEmbed = document.embeds.namedItem("mainVideo");
if (namedEmbed) {
console.log("Named embed width: " + namedEmbed.width);
}
// Check if collection is empty
if (document.embeds.length === 0) {
console.log("No embed elements found");
}
</script>
</body>
</html>
Total embeds: 2 First embed src: /html/music.mp3 Named embed width: 400
Practical Use Cases
Common scenarios where document.embeds is useful:
<!DOCTYPE html>
<html>
<body>
<embed src="/html/presentation.pdf" width="600" height="400">
<embed src="/html/animation.swf" width="300" height="200">
<button onclick="modifyEmbeds()">Modify All Embeds</button>
<script>
function modifyEmbeds() {
// Loop through all embed elements
for (let i = 0; i < document.embeds.length; i++) {
let embed = document.embeds[i];
// Modify properties
embed.style.border = "2px solid blue";
embed.title = "Embed element " + (i + 1);
console.log("Modified embed: " + embed.src);
}
}
// Check browser support
if (document.embeds) {
console.log("document.embeds is supported");
}
</script>
</body>
</html>
document.embeds is supported
Browser Compatibility
The document.embeds property is supported in all modern browsers. It's part of the HTML DOM specification and provides backward compatibility for legacy embedded content.
Conclusion
The document.embeds property offers a simple way to access and manipulate all embed elements in a document. Use it to count embeds, modify their properties, or validate embedded content programmatically.
230 Views
