HTMLParagraphElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLParagraphElement extends HTMLElement

Beschreibung

HTMLParagraphElement ist die DOM-Schnittstelle für Absätze, also für <p>-Elemente. Jedes Objekt, das du über document.createElement('p'), document.querySelector('p') oder ähnliche Methoden erhältst, ist eine Instanz dieser Schnittstelle. Die Vererbungskette lautet EventTarget → Node → Element → HTMLElement → HTMLParagraphElement.

Eigene Eigenschaften bringt die Schnittstelle kaum mit. Es gibt nur align, eine veraltete Zeichenkette für die horizontale Ausrichtung ("left", "right", "center", "justify"). Sie spiegelt das gleichnamige HTML-Attribut wider. Im Alltag arbeitest du mit den geerbten Mitgliedern, zum Beispiel textContent, innerText, classList, dataset, style, append() oder addEventListener().

Nützlich ist die Schnittstelle vor allem für Typprüfungen mit instanceof HTMLParagraphElement und in TypeScript. Dort liefert querySelector('p') automatisch den Typ HTMLParagraphElement | null. Den Konstruktor kannst du nicht direkt mit new aufrufen. Neue Absätze erzeugst du immer über document.createElement('p').

Parameter

Name	Typ	Default	Beschreibung
$align	string	""	Veraltet. Spiegelt das HTML-Attribut `align` wider (`"left"`, `"right"`, `"center"`, `"justify"`). Verwende stattdessen die CSS-Eigenschaft `text-align`.

Rückgabewert

Typ

HTMLParagraphElement

Beschreibung

Instanzen entstehen über document.createElement('p') oder über Abfragen wie querySelector('p').

Beispiele

Absatz erzeugen und einfügen

const absatz = document.createElement('p');
absatz.textContent = 'Willkommen auf programmierung.net!';
absatz.classList.add('intro');
document.body.append(absatz);

console.log(absatz instanceof HTMLParagraphElement);
console.log(absatz.tagName);

true P

Typprüfung vor dem Zugriff

const el = document.querySelector('.hinweis');

if (el instanceof HTMLParagraphElement) {
  el.textContent = 'Deine Änderungen wurden gespeichert.';
  el.dataset.status = 'ok';
} else {
  console.warn('Kein Absatz gefunden.');
}

Alle Absätze eines Artikels auswerten

const absaetze = [...document.querySelectorAll('article p')];

const woerter = absaetze
  .map((p) => p.textContent.trim().split(/\s+/).filter(Boolean).length)
  .reduce((summe, n) => summe + n, 0);

console.log(`${absaetze.length} Absätze, ${woerter} Wörter`);

z. B. "5 Absätze, 312 Wörter"

Veraltetes align durch CSS ersetzen

const p = document.createElement('p');
p.align = 'center';           // veraltet, funktioniert aber noch
console.log(p.outerHTML);

p.removeAttribute('align');
p.style.textAlign = 'center'; // empfohlen
console.log(p.outerHTML);

// Wichtig · Fallstricke

Kein direkter Konstruktor: new HTMLParagraphElement() wirft einen TypeError („Illegal constructor“). Verwende document.createElement('p').
Automatisches Schließen durch den HTML-Parser: Ein <p> darf keine Blockelemente wie <div>, <ul> oder <table> enthalten. Der Parser schließt den Absatz davor automatisch. Dadurch weicht das DOM vom Markup ab, zum Beispiel bei innerHTML. Beim Einfügen per append() wird dagegen nicht korrigiert.
align ist veraltet und nur noch aus Kompatibilitätsgründen vorhanden. Verwende CSS (text-align).
Sicherheit: Setze Text aus Benutzereingaben über textContent und nicht über innerHTML. So vermeidest du XSS-Lücken.
Die Schnittstelle wird von allen Browsern unterstützt, auch von sehr alten.

Siehe auch

Element HTMLParamElement HTMLProgressElement HTMLAreaElement HTMLCanvasElement