Signatur
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
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);
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();
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);
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);
// 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:
HTMLCollectionhat keinmap/filter/forEach.for...offunktioniert aber. - Während des Parsens: Ein gerade laufendes klassisches Skript sieht nur die bis dahin geparsten Skripte. Das aktuell laufende Skript liefert
document.currentScriptzuverlässiger alsdocument.scripts[document.scripts.length - 1](das beiasync/defernicht stimmt). - Nicht enthalten: Skripte in Shadow-DOM-Bäumen, in
<template>-Inhalten und in iframes (dortiframe.contentDocument.scriptsverwenden, sofern Same-Origin). - Sicherheit: Skripte, die per
innerHTMLeingefü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.