HTMLDListElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLDListElement extends HTMLElement

Beschreibung

HTMLDListElement ist die DOM-Schnittstelle für <dl>-Elemente. Solche Listen heißen heute Beschreibungslisten, früher Definitionslisten. Sie bestehen aus Begriffen (<dt>) und den dazugehörigen Beschreibungen (<dd>). Typische Anwendungen sind Glossare, Metadaten-Anzeigen wie „Autor: …, Datum: …“, FAQ-Listen und Schlüssel-Wert-Übersichten.

Außer der veralteten Eigenschaft compact hat die Schnittstelle keine eigenen Eigenschaften oder Methoden. Du arbeitest also mit den geerbten APIs von HTMLElement, Element und Node, zum Beispiel append(), children, querySelectorAll() oder dataset.

Einen neuen HTMLDListElement erzeugst du mit document.createElement('dl'). Einen direkten Konstruktor (new HTMLDListElement()) gibt es nicht, der Aufruf löst einen TypeError aus. Mit instanceof HTMLDListElement prüfst du zuverlässig, ob ein Element ein <dl> ist.

Parameter

Name	Typ	Default	Beschreibung
$compact	boolean	false	Veraltet. Spiegelt das HTML-Attribut `compact` wider. Es war ein Hinweis an den Browser, die Liste platzsparend darzustellen. Heutige Browser beachten es nicht, nutze stattdessen CSS.

Rückgabewert

Typ

HTMLDListElement

Beschreibung

Eine Instanz bekommst du über document.createElement('dl') oder über DOM-Abfragen wie document.querySelector('dl').

Beispiele

Beschreibungsliste aus einem Objekt erzeugen

const produkt = { Name: 'Laptop X1', Preis: '1.299 €', Gewicht: '1,2 kg' };

const dl = document.createElement('dl');
for (const [begriff, wert] of Object.entries(produkt)) {
  const dt = document.createElement('dt');
  dt.textContent = begriff;
  const dd = document.createElement('dd');
  dd.textContent = wert;
  dl.append(dt, dd);
}
document.body.append(dl);

console.log(dl instanceof HTMLDListElement, dl.children.length);

true 6

Vorhandene Liste in ein Objekt zurücklesen

// HTML: <dl id="meta"><dt>Autor</dt><dd>Anna</dd><dt>Datum</dt><dd>2024-05-01</dd></dl>
const dl = document.getElementById('meta');

if (dl instanceof HTMLDListElement) {
  const daten = {};
  for (const dt of dl.querySelectorAll('dt')) {
    const dd = dt.nextElementSibling;
    if (dd?.tagName === 'DD') daten[dt.textContent.trim()] = dd.textContent.trim();
  }
  console.log(daten);
}

{ Autor: 'Anna', Datum: '2024-05-01' }

Glossar per Klick auf- und zuklappen

const glossar = document.querySelector('dl.glossar');

glossar.addEventListener('click', (event) => {
  const dt = event.target.closest('dt');
  if (!dt || !glossar.contains(dt)) return;
  const dd = dt.nextElementSibling;
  if (dd?.tagName === 'DD') dd.hidden = !dd.hidden;
});

// Wichtig · Fallstricke

new HTMLDListElement() löst einen TypeError („Illegal constructor“) aus. Verwende document.createElement('dl').
Die Eigenschaft compact ist veraltet und hat keine sichtbare Wirkung mehr. Den Abstand steuerst du über CSS, zum Beispiel mit dd { margin-left: 0; }.
Eine gültige <dl> enthält als direkte Kinder nur <dt>/<dd>-Gruppen. Erlaubt ist auch ein umschließendes <div> pro Gruppe, etwa für Styling. Das musst du beim Auslesen über children berücksichtigen.
Zu einem <dt> können mehrere <dd> gehören und umgekehrt. Wenn du nur nextElementSibling liest, erfasst du nur die erste Beschreibung.
Befüllst du die Liste mit Nutzerdaten, verwende textContent statt innerHTML, um XSS zu vermeiden.
Kompatibilität: Die Schnittstelle wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

Element.append() HTMLTimeElement HTMLOListElement HTMLUListElement HTMLDataListElement