Document.head — Eigenschaft · JavaScript-Referenz

Signatur

get Document.head

Beschreibung

Über document.head greifen Sie direkt auf das <head>-Element des Dokuments zu. Das ist deutlich kürzer und schneller als document.getElementsByTagName('head')[0] oder document.querySelector('head').

Typische Einsatzfälle sind das dynamische Nachladen von Skripten und Stylesheets, das Einfügen oder Ändern von <meta>-Tags (etwa für Open Graph, theme-color oder robots), das Setzen von <link rel="preload">-Hinweisen sowie das Auslesen vorhandener Metadaten.

Die Eigenschaft selbst ist schreibgeschützt: Sie können document.head keinen neuen Wert zuweisen. Der Inhalt des zurückgegebenen Elements lässt sich jedoch beliebig über DOM-Methoden wie append(), appendChild() oder querySelector() verändern.

Gibt es mehrere <head>-Elemente, wird das erste zurückgegeben. Fehlt der <head> im HTML-Quelltext, erzeugt der HTML-Parser ihn automatisch, sodass die Eigenschaft in normalen HTML-Dokumenten praktisch nie null ist.

Rückgabewert

Typ

HTMLHeadElement | null

Beschreibung

Das erste <head>-Element des Dokuments oder null, wenn es keines gibt (z. B. in XML-Dokumenten oder in per document.implementation.createDocument() erzeugten Dokumenten ohne head).

Beispiele

Stylesheet dynamisch nachladen

const loadStylesheet = (href) => new Promise((resolve, reject) => {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  link.onload = () => resolve(link);
  link.onerror = () => reject(new Error(`Laden fehlgeschlagen: ${href}`));
  document.head.append(link);
});

await loadStylesheet('/css/dark-theme.css');
console.log('Theme geladen');

Theme geladen

Meta-Tag setzen oder aktualisieren

const setMeta = (name, content) => {
  let meta = document.head.querySelector(`meta[name="${name}"]`);
  if (!meta) {
    meta = document.createElement('meta');
    meta.name = name;
    document.head.append(meta);
  }
  meta.content = content;
};

setMeta('theme-color', '#1e293b');
console.log(document.head.querySelector('meta[name="theme-color"]').content);

#1e293b

Vergleich mit anderen Zugriffswegen

console.log(document.head === document.querySelector('head'));
console.log(document.head instanceof HTMLHeadElement);
console.log(document.head.children.length > 0);

true true true

Schreibschutz der Eigenschaft

'use strict';
try {
  document.head = document.createElement('head');
} catch (err) {
  console.log(err instanceof TypeError);
}

true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an document.head wird im Nicht-Strict-Modus stillschweigend ignoriert und löst im Strict-Modus einen TypeError aus.
Kompatibilität: In allen modernen Browsern verfügbar; nur sehr alte Internet-Explorer-Versionen (IE 8 und älter) kennen die Eigenschaft nicht – dort war document.getElementsByTagName('head')[0] nötig.
Zeitpunkt: In Skripten im <head> ist das Element schon vorhanden, sein Inhalt aber eventuell noch unvollständig, weil der Parser noch nicht fertig ist.
Sicherheit: Wer dynamisch <script>-Elemente mit Adressen aus Benutzereingaben einfügt, öffnet XSS-Lücken. Nur vertrauenswürdige Quellen verwenden, eine Content Security Policy (CSP) einsetzen und bei Fremd-Ressourcen Subresource Integrity (integrity-Attribut) nutzen.
Per innerHTML in den head eingefügte <script>-Elemente werden nicht ausgeführt – verwenden Sie document.createElement('script').

Siehe auch

Document.body Element.append() Document.title CSSSkewX.ax Document.URL