Start · Sprachen · JavaScript · Referenz · Document.scripts

Document.scripts

Eigenschaft

Gibt eine live aktualisierte <code>HTMLCollection</code> aller <code>&lt;script&gt;</code>-Elemente im Dokument zurück, in Dokumentreihenfolge.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

get Document.scripts

Beschreibung

Die schreibgeschützte Eigenschaft document.scripts liefert eine HTMLCollection mit allen <script>-Elementen des Dokuments, sortiert in Dokumentreihenfolge. Das umfasst Skripte in <head> und <body>, externe (src) wie auch Inline-Skripte, klassische Skripte ebenso wie Module (type="module"), JSON-Datenblöcke (type="application/json") und Import-Maps.

Die Sammlung ist live: Wenn per JavaScript Skripte eingefügt oder entfernt werden, ändert sich ihr Inhalt automatisch. Das ist praktisch, um zu prüfen, ob eine Bibliothek schon geladen wurde, oder um Skripte für Debugging und Auditing (z. B. zum Erfassen von Drittanbieter-Skripten) aufzulisten.

Funktional entspricht document.scripts etwa document.getElementsByTagName("script"). Brauchst du einen statischen Schnappschuss oder feinere Filter, ist document.querySelectorAll("script[src]") oft die bessere Wahl.

Rückgabewert

Typ
HTMLCollection<HTMLScriptElement>
Beschreibung
Eine live aktualisierte HTMLCollection aller <script>-Elemente. Leer (length === 0), wenn keine Skripte vorhanden sind — niemals null.

Beispiele

Alle externen Skript-URLs auflisten

// HTMLCollection in ein Array umwandeln, um Array-Methoden zu nutzen
const externeSkripte = Array.from(document.scripts)
  .filter((script) => script.src)
  .map((script) => script.src);

console.log(`Anzahl Skripte: ${document.scripts.length}`);
console.log(externeSkripte);
Anzahl Skripte: 3 ["https://example.com/js/app.js", "https://cdn.example.net/analytics.js"]

Prüfen, ob eine Bibliothek bereits eingebunden ist

const istGeladen = (dateiname) =>
  [...document.scripts].some((s) => s.src.endsWith(dateiname));

const ladeSkript = (url) =>
  new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = url;
    script.onload = resolve;
    script.onerror = () => reject(new Error(`Fehler beim Laden: ${url}`));
    document.head.append(script);
  });

const init = async () => {
  if (!istGeladen("chart.umd.js")) {
    await ladeSkript("https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.js");
  }
  console.log("Chart.js bereit");
};

init();
Chart.js bereit

Live-Verhalten der Sammlung

const skripte = document.scripts;
console.log(skripte.length); // z. B. 2

const neu = document.createElement("script");
neu.textContent = "console.log('dynamisch');";
document.body.append(neu);

// Dieselbe Referenz spiegelt die Änderung sofort wider
console.log(skripte.length);
2 dynamisch 3

JSON-Datenblock auslesen

// HTML: <script id="config" type="application/json">{"theme":"dark"}</script>
const configScript = document.scripts.namedItem("config");
const config = configScript ? JSON.parse(configScript.textContent) : {};
console.log(config.theme);
dark

// Wichtig · Fallstricke

  • Live-Sammlung: Wer beim Iterieren Skripte hinzufügt oder entfernt, riskiert Endlosschleifen oder übersprungene Elemente. Vorher mit Array.from() oder Spread-Syntax einen Schnappschuss erstellen.
  • Kein Array: HTMLCollection hat kein map/filter/forEach. for...of funktioniert aber.
  • Während des Parsens: Ein gerade laufendes klassisches Skript sieht nur die bis dahin geparsten Skripte. Das aktuell laufende Skript liefert document.currentScript zuverlässiger als document.scripts[document.scripts.length - 1] (das bei async/defer nicht stimmt).
  • Nicht enthalten: Skripte in Shadow-DOM-Bäumen, in <template>-Inhalten und in iframes (dort iframe.contentDocument.scripts verwenden, sofern Same-Origin).
  • Sicherheit: Skripte, die per innerHTML eingefügt werden, erscheinen zwar in der Sammlung, werden aber nicht ausgeführt. Die Liste eignet sich nicht als Sicherheitsmechanismus — für Kontrolle über ausgeführte Skripte die Content Security Policy (CSP) verwenden.
  • Kompatibilität: In allen modernen Browsern seit Langem unterstützt; in SVG-Dokumenten werden auch SVG-<script>-Elemente erfasst.