HTMLDivElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLDivElement extends HTMLElement

Beschreibung

HTMLDivElement ist die DOM-Schnittstelle für jedes <div>-Element. Sie entsteht, wenn der Parser ein <div> im HTML findet, oder wenn du mit document.createElement("div") ein neues Element erzeugst. Einen eigenen Konstruktor, den man direkt aufrufen kann, gibt es nicht: new HTMLDivElement() wirft einen TypeError („Illegal constructor“).

Die Schnittstelle fügt kaum etwas Eigenes hinzu. Die einzige zusätzliche Eigenschaft ist align, und die ist veraltet. Alles, was man in der Praxis mit einem div macht, kommt über Vererbung von HTMLElement, Element, Node und EventTarget, zum Beispiel classList, dataset, style, textContent, append() oder addEventListener().

Wofür ist die Schnittstelle trotzdem nützlich?

Typprüfung mit instanceof HTMLDivElement, etwa in Event-Delegation oder Hilfsfunktionen
Typisierung in TypeScript bzw. JSDoc: document.createElement("div") liefert automatisch den Typ HTMLDivElement
Angepasste eingebaute Elemente (class X extends HTMLDivElement zusammen mit customElements.define(..., { extends: "div" })). Safari unterstützt das allerdings nicht.

Ein div hat keine Semantik. Wenn es passende Elemente gibt, etwa <section>, <nav>, <button> oder <article>, sind diese für Barrierefreiheit und SEO meist die bessere Wahl.

Parameter

Name	Typ	Default	Beschreibung
$align	string	""	Veraltet. Spiegelt das HTML-Attribut `align` wider (`"left"`, `"right"`, `"center"`, `"justify"`). Stattdessen CSS verwenden (`text-align`, Flexbox, Grid).

Rückgabewert

Typ

HTMLDivElement

Beschreibung

Instanzen entstehen über den Parser, document.createElement("div"), cloneNode() oder Abfragen wie querySelector("div").

Beispiele

div erzeugen und einfügen

const box = document.createElement("div");
box.className = "hinweis";
box.dataset.typ = "info";
box.textContent = "Speichern erfolgreich!";
document.body.append(box);

console.log(box instanceof HTMLDivElement);
console.log(box.outerHTML);

true <div class="hinweis" data-typ="info">Speichern erfolgreich!</div>

Typprüfung bei Event-Delegation

const liste = document.querySelector("#karten");

liste.addEventListener("click", (event) => {
  const karte = event.target.closest(".karte");
  if (karte instanceof HTMLDivElement) {
    karte.classList.toggle("ausgewaehlt");
    console.log(`Karte ${karte.dataset.id} umgeschaltet`);
  }
});

Karte 3 umgeschaltet

Konstruktor ist nicht direkt aufrufbar

try {
  const div = new HTMLDivElement();
} catch (err) {
  console.log(err.name, err.message);
}

// Richtig:
const div = document.createElement("div");
console.log(div.constructor.name);

TypeError Illegal constructor HTMLDivElement

Veraltetes align durch CSS ersetzen

const alt = document.createElement("div");
alt.align = "center"; // veraltet
console.log(alt.getAttribute("align"));

const neu = document.createElement("div");
neu.style.textAlign = "center"; // empfohlen
console.log(neu.style.cssText);

center text-align: center;

// Wichtig · Fallstricke

Kein direkter Konstruktor: new HTMLDivElement() wirft einen TypeError. Nur innerhalb einer mit customElements.define() registrierten Unterklasse ist super() erlaubt.
align ist veraltet und sollte in neuem Code nicht mehr verwendet werden. Für Ausrichtung ist CSS zuständig.
Angepasste eingebaute Elemente (extends HTMLDivElement mit is="...") gehen in Chromium und Firefox, aber nicht in Safari. Autonome Custom Elements (extends HTMLElement) sind die sicherere Wahl.
Barrierefreiheit: Ein anklickbares div ist weder per Tastatur fokussierbar noch hat es eine Rolle. Nimm besser <button>, oder ergänze tabindex, role und Tastatur-Handler.
Sicherheit: Wenn du Inhalte über innerHTML einsetzt, besteht XSS-Gefahr. Für Benutzereingaben ist textContent die richtige Wahl.
instanceof über Frames hinweg: Elemente aus einem iframe haben ein anderes globales HTMLDivElement, deshalb liefert instanceof dort false. Als Alternative taugt el.tagName === "DIV".

Siehe auch

Element HTMLLIElement HTMLAudioElement HTMLBRElement HTMLDListElement