Comment — Schnittstelle · JavaScript-Referenz

Signatur

interface Comment extends CharacterData

Beschreibung

Comment steht für einen Kommentarknoten im DOM, also alles zwischen . Kommentare werden nicht dargestellt, stehen aber als eigene Knoten im Baum. Ihr nodeType ist Node.COMMENT_NODE (Wert 8) und ihr nodeName ist immer "#comment".

Das Interface erbt von CharacterData und damit von Node und EventTarget. Eigene Methoden oder Eigenschaften hat es nicht. Den Text liest und ändert man über geerbte Mitglieder wie data, textContent, length, appendData(), replaceData(), before(), after() oder remove().

Typische Einsätze:

Platzhalter in Template- und Rendering-Bibliotheken wie Vue, Lit oder Angular, die sich mit Kommentarknoten Einfügepositionen merken
Metadaten für serverseitiges Rendern, z. B. Markierungen für die Hydration
Debug-Hinweise im erzeugten DOM
Bereinigung von Markup, etwa um vor dem Export alle Kommentare zu entfernen

Einen Kommentar erzeugt man mit new Comment(text) oder mit document.createComment(text). Um alle Kommentare zu finden, eignet sich ein TreeWalker bzw. NodeIterator mit dem Filter NodeFilter.SHOW_COMMENT. querySelectorAll() findet nur Elemente und damit keine Kommentare.

Parameter

Name	Typ	Default	Beschreibung
$data	string	""	Nur für den Konstruktor `new Comment(data)`: der Textinhalt des Kommentars, ohne die Begrenzer `<!--` und `-->`.

Rückgabewert

Typ

Comment

Beschreibung

Der Konstruktor gibt einen neuen Comment-Knoten zurück, der noch nicht im Dokument hängt. Man fügt ihn z. B. mit append() oder before() ein.

Beispiele

Kommentar erzeugen und einfügen

// Zwei gleichwertige Wege
const c1 = new Comment('Beginn Produktliste');
const c2 = document.createComment('Ende Produktliste');

const list = document.querySelector('#products') ?? document.body;
list.before(c1);
list.after(c2);

console.log(c1.nodeType === Node.COMMENT_NODE, c1.nodeName, c1.data);
console.log(list.parentNode.innerHTML.includes('<!--Beginn Produktliste-->'));

true "#comment" "Beginn Produktliste" true

Alle Kommentare im Dokument finden und entfernen

const removeComments = (root = document.body) => {
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
  const found = [];
  // Erst sammeln, dann entfernen, damit der Walker nicht durcheinanderkommt
  while (walker.nextNode()) found.push(walker.currentNode);
  found.forEach((node) => node.remove());
  return found.length;
};

document.body.innerHTML = '<p>A</p><!-- intern --><p>B</p><!-- TODO -->';
console.log(removeComments());
console.log(document.body.innerHTML);

2 <p>A</p><p>B</p>

Kommentar als Platzhalter für bedingtes Rendern

// Der Kommentar merkt sich die Stelle, an der ein Element ein- und ausgeblendet wird
const anchor = new Comment('if:banner');
document.body.append(anchor);

let banner = null;
const setVisible = (visible) => {
  if (visible && !banner) {
    banner = Object.assign(document.createElement('div'), { textContent: 'Angebot!' });
    anchor.after(banner);
  } else if (!visible && banner) {
    banner.remove();
    banner = null;
  }
};

setVisible(true);
console.log(anchor.nextSibling?.textContent);
setVisible(false);
console.log(anchor.nextSibling);

Angebot! null

Kommentartext lesen und ändern

const note = new Comment('Version 1');
note.appendData(' – geprüft');
console.log(note.data, note.length);

note.data = 'Version 2';
console.log(note.textContent);

Version 1 – geprüft 19 Version 2

// Wichtig · Fallstricke

Nicht versteckt: Kommentare sind im Quelltext, in den Entwicklerwerkzeugen und über innerHTML für jeden sichtbar. Passwörter, API-Schlüssel oder interne Infos gehören nicht hinein.
Nutzereingaben im Text: Man kann --> in data schreiben, ohne dass eine Exception auftritt. Beim Serialisieren über innerHTML oder outerHTML entsteht dann jedoch Markup, das den Kommentar vorzeitig schließt. Wird dieses Markup später erneut geparst, etwa serverseitig oder beim Kopieren, droht eine XSS-Lücke. Nutzereingaben daher nicht ungeprüft in Kommentare schreiben. Bei XML-Serialisierung wirft der XMLSerializer in diesem Fall einen Fehler.
Kommentare sind Knoten: childNodes, firstChild und nextSibling liefern auch Kommentare. children, firstElementChild und nextElementSibling überspringen sie.
Suche: querySelector() findet keine Kommentare. Dafür TreeWalker oder NodeIterator mit NodeFilter.SHOW_COMMENT nutzen.
Bedingte Kommentare für ältere Versionen des Internet Explorers (<!--[if IE]>) werden heute als normale Kommentare behandelt.
Kompatibilität: Das Interface gibt es in allen Browsern. Den Konstruktor new Comment() unterstützen alle modernen Browser, der Internet Explorer nicht. Dort document.createComment() verwenden.

Siehe auch

Text Node Client DOMRect Document