HTMLTitleElement.text — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTitleElement.text

Beschreibung

Die Eigenschaft text des Interfaces HTMLTitleElement liefert den Textinhalt eines <title>-Elements als String. Beim Setzen werden alle vorhandenen Kindknoten des Elements durch einen einzigen Textknoten mit dem neuen Wert ersetzt. Sie verhält sich damit im Wesentlichen wie textContent für dieses Element.

Anders als document.title gibt text den Inhalt unverändert zurück: Leerraum am Anfang und Ende wird nicht entfernt und mehrfache Leerzeichen oder Zeilenumbrüche werden nicht zusammengefasst. document.title dagegen bereinigt den Leerraum und legt beim Setzen bei Bedarf sogar ein <title>-Element an.

In der Praxis nutzt man text, wenn man bereits eine Referenz auf das <title>-Element hat, etwa aus document.querySelector('title'), oder wenn man mit einem Dokument arbeitet, das nicht das aktuelle ist, z. B. einem mit DOMParser erzeugten Dokument. Typische Anwendungsfälle sind Benachrichtigungszähler im Tab-Titel, Titel-Aktualisierungen in Single-Page-Apps oder das Auslesen von Seitentiteln aus geladenem HTML.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: der neue Titeltext. Andere Werte werden in einen String umgewandelt. Der Text wird wörtlich übernommen, HTML-Markup wird nicht ausgewertet.

Rückgabewert

Typ

string

Beschreibung

Der unveränderte Textinhalt des <title>-Elements, einschließlich Leerraum. Ein leerer String, wenn das Element keinen Text enthält.

Beispiele

Titel auslesen und mit document.title vergleichen

// HTML: <title>
//   Meine   Seite
// </title>
const titleEl = document.querySelector('title');

console.log(JSON.stringify(titleEl.text));
console.log(JSON.stringify(document.title));

"\n Meine Seite\n" "Meine Seite"

Zähler für ungelesene Nachrichten im Tab-Titel

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

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

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

(3) Posteingang Posteingang

Titel aus geladenem HTML mit DOMParser auslesen

const loadPageTitle = async (url) => {
  const response = await fetch(url);
  const html = await response.text();
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const titleEl = doc.querySelector('title');
  return titleEl ? titleEl.text.trim() : '(kein Titel)';
};

loadPageTitle('/impressum.html').then((title) => console.log(title));

Impressum – Beispiel GmbH

Markup wird nicht interpretiert

const titleEl = document.querySelector('title');
titleEl.text = '<b>Fett?</b> & Co.';

console.log(titleEl.text);
console.log(titleEl.children.length);

<b>Fett?</b> & Co. 0

// Wichtig · Fallstricke

Leerraum: text gibt den Rohtext zurück. Brauchst du den Titel so, wie der Browser ihn anzeigt, nimm document.title oder rufe .trim() auf und fasse den Leerraum selbst zusammen.
Element fehlt: Wenn es kein <title> gibt, liefert document.querySelector('title') den Wert null, und ein Zugriff auf .text löst einen TypeError aus. document.title = '…' legt das Element dagegen automatisch an.
Sicherheit: Der Wert wird als reiner Text gesetzt. Nutzereingaben können darüber also kein HTML einschleusen, daher gibt es hier kein XSS-Risiko wie bei innerHTML.
SVG: Das <title>-Element in SVG ist ein SVGTitleElement und hat keine Eigenschaft text. Verwende dort textContent.
Kompatibilität: Wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

Document.title ElementInternals.ariaValueText HTMLMeterElement.max HTMLOptionElement.text HTMLTableElement.tFoot