HTMLTitleElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLTitleElement extends HTMLElement

Beschreibung

HTMLTitleElement ist die DOM-Schnittstelle für das <title>-Element im <head> eines HTML-Dokuments. Sie erbt alle Eigenschaften und Methoden von HTMLElement und bringt als eigene Eigenschaft text mit. Darüber liest oder setzt man den Textinhalt des Titels, also den Text, der im Browser-Tab, in Lesezeichen und im Verlauf erscheint.

Meistens reicht die Kurzform document.title. Direkt auf das Element greift man zu, wenn man es beobachten möchte (etwa mit einem MutationObserver), wenn es noch gar kein <title> gibt und man eins per document.createElement("title") anlegen will, oder wenn man in Dokumenten arbeitet, die keine HTML-Dokumente sind (z. B. SVG, wo document.title sich anders verhält).

Die Eigenschaft text verhält sich wie textContent: Beim Schreiben werden alle Kindknoten durch einen einzigen Textknoten ersetzt. HTML-Markup wird dabei nicht interpretiert. document.title ist praktisch dasselbe, entfernt beim Lesen aber zusätzlich Leerraum am Anfang und Ende und fasst mehrere Leerzeichen zu einem zusammen.

Parameter

Name	Typ	Default	Beschreibung
$text	string	""	Instanzeigenschaft (kein Konstruktorparameter): Textinhalt des `<title>`-Elements, lesbar und schreibbar. Der Wert wird unverändert zurückgegeben, Leerraum wird also nicht normalisiert.

Rückgabewert

Typ

HTMLTitleElement

Beschreibung

Instanzen bekommt man über document.querySelector("title"), document.head.getElementsByTagName("title")[0] oder document.createElement("title"). Einen öffentlichen Konstruktor gibt es nicht: new HTMLTitleElement() wirft einen TypeError.

Beispiele

Titel-Element holen und lesen

const titleEl = document.querySelector("title");
console.log(titleEl instanceof HTMLTitleElement);
console.log(titleEl.text);
console.log(titleEl.text === document.title);

true Meine Startseite true

Titel-Element anlegen, wenn keins vorhanden ist

const ensureTitle = (value) => {
  let titleEl = document.head.querySelector("title");
  if (!titleEl) {
    titleEl = document.createElement("title");
    document.head.append(titleEl);
  }
  titleEl.text = value;
  return titleEl;
};

ensureTitle("Dashboard – programmierung.net");
console.log(document.title);

Dashboard – programmierung.net

Ungelesene Nachrichten im Tab anzeigen

const titleEl = document.querySelector("title");
const baseTitle = titleEl.text;

const updateUnread = (count) => {
  titleEl.text = count > 0 ? `(${count}) ${baseTitle}` : baseTitle;
};

updateUnread(3);
console.log(titleEl.text);
updateUnread(0);
console.log(titleEl.text);

(3) Postfach Postfach

Titeländerungen mit MutationObserver beobachten

const titleEl = document.querySelector("title");

const observer = new MutationObserver(() => {
  console.log("Neuer Titel:", titleEl.text);
});

// Wegen der Kindknoten-Ersetzung childList und characterData beobachten
observer.observe(titleEl, { childList: true, characterData: true, subtree: true });

document.title = "Einstellungen";

Neuer Titel: Einstellungen

// Wichtig · Fallstricke

Kein HTML im Titel: Wer text setzt, erzeugt reinen Text. Eine Zeichenkette wie <b>Hallo</b> erscheint also wörtlich im Tab. Das ist ungefährlich, weil kein XSS möglich ist. Trotzdem sollte man Benutzereingaben kürzen, bevor sie in den Titel kommen, damit Tabs und Lesezeichen lesbar bleiben.
Leerraum: titleEl.text gibt den Rohtext zurück. document.title fasst Leerraum zusammen und entfernt ihn am Anfang und Ende. Beim Vergleichen beider Werte kann es deshalb Unterschiede geben.
Mehrere <title>-Elemente: Maßgeblich ist nur das erste im Dokument. document.title schreibt ebenfalls in dieses Element.
SEO und Single-Page-Apps: Suchmaschinen führen JavaScript zwar oft aus, doch ein Titel, der erst im Browser gesetzt wird, kann verzögert oder gar nicht erfasst werden. Wichtige Titel sollten deshalb schon im serverseitig ausgelieferten HTML stehen.
Kompatibilität: Wird von allen Browsern unterstützt, auch von sehr alten. Eine Prüfung auf Verfügbarkeit ist nicht nötig.

Siehe auch

Document.title HTMLTimeElement HTMLTableElement HTMLStyleElement HTMLBaseElement