JavaScript Document embeds Property

What You’ll Learn

Document.embeds is a read-only instance property that returns a live HTMLCollection of every <embed> element in the document. Learn how to count, loop, read src, compare plugins and querySelectorAll, and use five examples with try-it labs.

Introduction

The HTML <embed> element inserts external content into a page—historically plugin formats, today often PDFs or other browser-handled resources. When a script needs every embed on the page, document.embeds gives a ready-made collection.

MDN: the embeds read-only property returns a list of the embedded <embed> elements within the current document. The HTML standard roots that collection at the document and filters only embed elements.

Related Document tutorials: domain, applets, Document constructor.

Understanding Document.embeds

A read-only instance property on Document. Its value is a live HTMLCollection of every <embed> in the document tree.

• Value — HTMLCollection of embed elements (MDN).
• Read-only — you do not assign a new collection to document.embeds.
• Live collection — reflects DOM changes when embeds are added or removed.
• Indexed access — document.embeds[i] or item(i).
• Named access — embeds with a name / id may be reachable via namedItem.
• Same as plugins — document.plugins returns the same collection in modern HTML.

📝 Syntax

document.embeds

Value

An HTMLCollection of <embed> elements in the document.

Common patterns

const count = document.embeds.length;
const first = document.embeds[0];
const byName = document.embeds.namedItem("reportPdf");

for (const el of document.embeds) {
  console.log(el.src);
}

CSS-selector alternative

const embeds = document.querySelectorAll("embed");
// Static NodeList — does not auto-update when you add/remove embeds

⚖️ document.embeds vs Related APIs

📄 Quick look at <embed>

An embed points at a resource with src and often a type MIME hint. Dimensions use width / height.

<embed
  id="reportPdf"
  name="reportPdf"
  src="/files/report.pdf"
  type="application/pdf"
  width="600"
  height="400">

Examples Gallery

Examples follow MDN Document: embeds. Use View Output or Try It Yourself for each case.

const count = document.embeds.length;
console.log("embed count:", count);

if (count === 0) {
  console.log("No <embed> elements on this page");
}

embed count: 2

for (const el of document.embeds) {
  console.log(el.tagName, el.src || "(no src)");
}

// Classic index loop also works:
for (let i = 0; i < document.embeds.length; i++) {
  console.log(i, document.embeds[i].src);
}

EMBED https://example.com/a.pdf
EMBED https://example.com/b.pdf
0 https://example.com/a.pdf
1 https://example.com/b.pdf

const report = document.embeds.namedItem("reportPdf");
if (report) {
  console.log("Found:", report.src);
} else {
  console.log("No embed named reportPdf");
}

Found: https://example.com/report.pdf

const before = document.embeds.length;

const el = document.createElement("embed");
el.src = "https://example.com/demo.pdf";
el.type = "application/pdf";
document.body.appendChild(el);

const after = document.embeds.length;
console.log("before:", before, "after:", after);
// after === before + 1

before: 1 after: 2

console.log(
  "same object?",
  document.embeds === document.plugins
); // typically true

console.log("embeds:", document.embeds.length);
console.log("plugins:", document.plugins.length);

const staticList = document.querySelectorAll("embed");
console.log("querySelectorAll:", staticList.length);

same object? true
embeds: 2
plugins: 2
querySelectorAll: 2

🚀 Common Use Cases

• Inventory embeds — count or list every <embed> for debugging.
• Audit sources — log each src before shipping a page.
• Feature detection style checks — skip PDF UI when length === 0.
• Legacy scripts — understand document.plugins referring to embeds.
• Teaching live collections — show how length updates after DOM inserts.
• Not for iframes — query iframe / object separately.

📝 Notes

• MDN: Baseline Widely available (since June 2018) — no Deprecated / Experimental / Non-standard banner.
• Value is an HTMLCollection of <embed> elements only.
• document.plugins returns the same collection in modern HTML.
• Live vs static: prefer querySelectorAll when you need a frozen snapshot or CSS filters.
• Related: domain, applets, Document constructor.

💡 Best Practices