HTMLScriptElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLScriptElement.type

Beschreibung

Die Eigenschaft type spiegelt das HTML-Attribut type eines <script>-Elements wider. Der Wert ist ein String und bestimmt, was der Inhalt des Elements darstellt: klassisches JavaScript, ein ES-Modul, eine Import-Map, Speculation Rules oder einen Datenblock, den der Browser nicht ausführt.

Übliche Werte sind:

leerer String oder ein JavaScript-MIME-Typ wie text/javascript: klassisches Skript. Das ist der Standard, wenn das Attribut fehlt.
module: Das Skript wird als ES-Modul behandelt. Es läuft automatisch zurückgestellt (wie mit defer), im Strict Mode und mit eigenem Gültigkeitsbereich, und es darf import/export verwenden.
importmap: Der Inhalt ist JSON, das festlegt, wie Modul-Bezeichner aufgelöst werden.
speculationrules: JSON-Regeln für Prefetch und Prerendering (Chromium-Browser).
jeder andere Wert, z. B. application/json oder text/template: Der Inhalt ist ein Datenblock. Der Browser führt ihn nicht aus, Skripte können ihn aber über textContent auslesen.

In der Praxis braucht man die Eigenschaft vor allem, wenn man Skripte dynamisch erzeugt, etwa um ein Modul nachzuladen. Außerdem kann man damit JSON-Konfigurationen aus dem HTML auslesen oder mit HTMLScriptElement.supports() prüfen, welche Skripttypen der Browser unterstützt.

Parameter

Name	Typ	Default	Beschreibung
$wert	string	""	Beim Setzen: der neue Typ, z. B. `"module"`, `"text/javascript"`, `"importmap"` oder `"application/json"`. Der Wert wird ins `type`-Attribut geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des type-Attributs, genau so, wie er im Attribut steht (also nicht normalisiert). Fehlt das Attribut, ist der Wert ein leerer String "".

Beispiele

ES-Modul dynamisch nachladen

const loadModule = (src) => new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.type = 'module'; // als ES-Modul ausführen
  script.src = src;
  script.addEventListener('load', resolve);
  script.addEventListener('error', reject);
  document.head.append(script);
});

await loadModule('/js/dashboard.js');
console.log('Modul geladen');

Modul geladen

JSON-Datenblock aus dem HTML auslesen

// HTML: <script id="config" type="application/json">{"apiUrl":"/api","debug":true}</script>
const el = document.getElementById('config');

if (el.type === 'application/json') {
  const config = JSON.parse(el.textContent);
  console.log(config.apiUrl, config.debug);
}

/api true

Typ prüfen und Unterstützung abfragen

const scripts = [...document.querySelectorAll('script')];

for (const s of scripts) {
  console.log(s.type || '(klassisch)', s.src || '[inline]');
}

// Prüfen, ob Import-Maps unterstützt werden
const hasImportMap = HTMLScriptElement.supports?.('importmap') ?? false;
console.log('Import-Maps:', hasImportMap);

(klassisch) https://example.com/app.js module [inline] Import-Maps: true

// Wichtig · Fallstricke

Änderungen nach dem Einfügen wirken nicht: Ein Skript wird nur einmal verarbeitet. Wer type ändert, nachdem das Element im Dokument steht, erreicht damit nicht, dass es noch einmal läuft oder als anderer Typ läuft. Deshalb type immer vor append() setzen.
Kein normalisierter Wert: Die Eigenschaft gibt den Attributwert unverändert zurück. Beim Vergleichen also z. B. el.type.trim().toLowerCase() verwenden. Ein fehlendes Attribut ergibt \"\", nicht \"text/javascript\".
Tippfehler verhindern die Ausführung: Bei einem unbekannten Wert, etwa \"modul\", behandelt der Browser das Skript als Datenblock und führt es ohne Fehlermeldung nicht aus.
Module: Module werden über CORS geladen. Von einem anderen Ursprung braucht der Server passende CORS-Header. Unter file:// funktionieren Module in der Regel nicht. Außerdem laufen Module immer zurückgestellt, das Attribut defer hat bei ihnen keine Wirkung.
Sicherheit: Datenblöcke mit application/json werden nicht ausgeführt, landen aber im HTML-Parser. Fügt man Benutzerdaten auf dem Server ein, muss </script> maskiert werden, sonst droht XSS. Dynamisch eingefügte Skripte unterliegen der Content Security Policy (CSP), gegebenenfalls ist ein nonce nötig.
Kompatibilität: Die Eigenschaft selbst funktioniert in allen Browsern. Die Werte module und importmap unterstützen alle aktuellen Browser. speculationrules gibt es bisher nur in Chromium-Browsern.

Siehe auch

HTMLScriptElement HTMLScriptElement.src HTMLScriptElement.supports() HTMLScriptElement.noModule HTMLScriptElement.defer import HTMLLinkElement.type