Document.title — Eigenschaft · JavaScript-Referenz

Signatur

Document.title

Beschreibung

Die Eigenschaft document.title liefert den Titel des Dokuments als String. In HTML-Dokumenten entspricht er dem Textinhalt des ersten <title>-Elements im Dokument. Beim Lesen werden Leerzeichen am Anfang und Ende entfernt und mehrere aufeinanderfolgende Leerraumzeichen zu einem einzigen Leerzeichen zusammengefasst.

Beim Setzen ändert sich der Textinhalt des <title>-Elements. Gibt es noch keines, legt der Browser automatisch ein <title> im <head> an. Fehlt auch <head>, hat das Setzen keine Wirkung. Der neue Titel erscheint sofort im Browser-Tab, in der Fensterleiste und in Lesezeichen bzw. im Verlauf.

Typische Einsatzfälle sind Single-Page-Applications, die den Titel bei jedem Routenwechsel anpassen, Benachrichtigungen im Tab (z. B. „(3) Posteingang“) und dynamische Statusanzeigen wie einen Fortschritt beim Upload. In SVG-Dokumenten bezieht sich die Eigenschaft auf das erste <title>-Kindelement des Wurzel-<svg>-Elements.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: der neue Titel. Andere Werte werden in einen String umgewandelt (`null` ergibt z. B. `"null"`).

Rückgabewert

Typ

string

Beschreibung

Der Titel des Dokuments mit normalisiertem Leerraum. Leerer String, wenn kein <title>-Element existiert.

Beispiele

Titel lesen und setzen

// Aktuellen Titel auslesen
console.log(document.title);

// Neuen Titel setzen – erscheint sofort im Tab
document.title = 'Warenkorb – Mein Shop';
console.log(document.title);

Startseite – Mein Shop Warenkorb – Mein Shop

Ungelesene Nachrichten im Tab anzeigen

const baseTitle = document.title;

const updateUnreadCount = (count) => {
  document.title = count > 0 ? `(${count}) ${baseTitle}` : baseTitle;
};

updateUnreadCount(3);
console.log(document.title);
updateUnreadCount(0);
console.log(document.title);

(3) Posteingang Posteingang

Titel bei Routenwechsel in einer SPA anpassen

const routes = {
  '/': 'Start',
  '/produkte': 'Produkte',
  '/kontakt': 'Kontakt'
};

const navigate = (path) => {
  history.pushState({}, '', path);
  document.title = `${routes[path] ?? 'Nicht gefunden'} | Beispiel GmbH`;
};

navigate('/produkte');
console.log(document.title);

Produkte | Beispiel GmbH

Hinweis bei Tab-Wechsel

const originalTitle = document.title;

document.addEventListener('visibilitychange', () => {
  document.title = document.hidden ? 'Komm zurück! 👋' : originalTitle;
});

// Wichtig · Fallstricke

Leerraum wird normalisiert: document.title = ' A B ' liefert beim Lesen \"A B\". Wer den exakten Inhalt braucht, liest document.querySelector('title').textContent.
Kein HTML: Der Wert wird als reiner Text behandelt. <b> & Co. erscheinen wörtlich, deshalb gibt es hier kein XSS-Risiko.
Kein <head>: Fehlt <head>, hat das Setzen in HTML-Dokumenten keine Wirkung.
SEO: Suchmaschinen, die JavaScript ausführen, sehen dynamisch gesetzte Titel meist, aber nicht immer zuverlässig. Wichtige Titel besser serverseitig ausliefern.
Verlauf: Bei history.pushState() wird der Parameter title von den Browsern ignoriert. Den Titel stattdessen über document.title setzen.
Barrierefreiheit: Screenreader lesen den Titel vor. Zu häufige Änderungen, etwa jede Sekunde, können stören.
Wird in allen Browsern unterstützt.

Siehe auch

Document Document.hidden visibilitychange Document.head Document.dir