JavaScript Document scripts Property

What You’ll Learn

Document.scripts is a read-only instance property that returns a live HTMLCollection of every <script> in the document. Learn how to count scripts, read src and type, compare with querySelectorAll, and five examples with try-it labs.

Introduction

Modern pages load JavaScript from many places—inline blocks, bundled files, analytics snippets, and module scripts. When your code needs to inspect every <script> tag on the page, document.scripts is the built-in collection to use.

MDN: the scripts property returns a list of the <script> elements in the document. The returned object is an HTMLCollection. You can use it just like an array to get all the elements in the list.

Related Document tutorials: currentScript, forms, images, Document constructor.

Understanding Document.scripts

A read-only instance property on every Document object.

• Value — live HTMLCollection of HTMLScriptElement nodes (MDN).
• Includes — inline scripts and external scripts with a src attribute.
• Access — document.scripts.length, document.scripts[0], or loop with for...of.
• Live — adding or removing <script> tags updates the same collection.
• Status — Baseline Widely available (since June 2018, MDN).

📝 Syntax

document.scripts

Value

An HTMLCollection of HTMLScriptElement items (MDN).

MDN example pattern

let scripts = document.scripts;

if (scripts.length) {
  console.log("This page has scripts!");
}

⚖️ Script-Related Document APIs

Examples Gallery

Examples follow MDN Document: scripts. Each includes a try-it lab you can run in the browser.

let scripts = document.scripts;

if (scripts.length) {
  console.log("This page has scripts!");
}

This page has scripts!

const count = document.scripts.length;
console.log("Script count:", count);

Script count: 3

const urls = [];

for (const script of document.scripts) {
  if (script.src) {
    urls.push(script.src);
  }
}

console.log(urls);

["https://example.com/app.js"]

let modules = 0;
let classic = 0;

for (const script of document.scripts) {
  if (script.type === "module") {
    modules++;
  } else {
    classic++;
  }
}

console.log({ modules, classic });

{ modules: 1, classic: 2 }

const before = document.scripts.length;

const extra = document.createElement("script");
extra.textContent = "console.log('added');";
document.body.appendChild(extra);

const after = document.scripts.length;
console.log("before:", before, "after:", after);

before: 2 after: 3

🚀 Common Use Cases

• Debug inventory — count how many scripts loaded on a page.
• Audit third-party tags — list external src URLs.
• Performance reviews — find blocking scripts without async or defer.
• Module migration — count classic vs type="module" scripts.
• Feature detection — confirm scripts exist before running loader logic.
• Teaching DOM collections — compare live HTMLCollection with static NodeList.

📝 Notes

• MDN: Baseline Widely available (since June 2018) — no Deprecated / Experimental / Non-standard banner.
• Value is an HTMLCollection of HTMLScriptElement items.
• Not the same as document.currentScript (single running script only).
• Includes dynamically inserted scripts once they are in the document tree.
• Related: currentScript, forms, Document constructor.

💡 Best Practices