HTMLUListElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLUListElement extends HTMLElement

Beschreibung

HTMLUListElement ist die DOM-Schnittstelle für ungeordnete Listen, also <ul>-Elemente. Jedes <ul> im Dokument und jedes mit document.createElement("ul") erzeugte Element ist eine Instanz davon. Die Schnittstelle erbt alle Eigenschaften und Methoden von HTMLElement, Element, Node und EventTarget.

Eigene Eigenschaften hat sie nur zwei, und beide sind veraltet:

compact (boolean): Hinweis, dass die Liste kompakt dargestellt werden soll. Gibt das HTML-Attribut compact wieder.
type (string): Art des Aufzählungszeichens, z. B. "disc", "circle" oder "square". Gibt das HTML-Attribut type wieder.

In der Praxis nutzt man HTMLUListElement vor allem, um Listen dynamisch aufzubauen, Einträge (<li>) hinzuzufügen, zu sortieren oder zu entfernen, oder um mit instanceof HTMLUListElement den Elementtyp zu prüfen. Für Aussehen und Aufzählungszeichen ist CSS zuständig (list-style-type, padding, margin), nicht die veralteten Eigenschaften.

Die Schnittstelle hat keinen eigenen Konstruktor, den man aufrufen könnte. Instanzen entstehen über document.createElement("ul") oder beim Parsen von HTML.

Rückgabewert

Typ

HTMLUListElement

Beschreibung

Ein Objekt für ein <ul>-Element. Man erhält es z. B. über document.createElement("ul") oder document.querySelector("ul").

Beispiele

Liste dynamisch aus Daten erzeugen

const aufgaben = ['Einkaufen', 'Code-Review', 'Sport'];

const liste = document.createElement('ul');
liste.className = 'aufgaben';

for (const text of aufgaben) {
  const li = document.createElement('li');
  li.textContent = text; // sicher: kein innerHTML
  liste.append(li);
}

document.body.append(liste);
console.log(liste instanceof HTMLUListElement, liste.children.length);

true 3

Typprüfung und Einträge auslesen

const el = document.querySelector('#navigation');

if (el instanceof HTMLUListElement) {
  const eintraege = [...el.querySelectorAll(':scope > li')]
    .map((li) => li.textContent.trim());
  console.log(eintraege);
} else {
  console.warn('#navigation ist keine ungeordnete Liste');
}

["Start", "Blog", "Kontakt"]

Einträge alphabetisch sortieren

const sortiereListe = (ul) => {
  const items = [...ul.children];
  items.sort((a, b) => a.textContent.localeCompare(b.textContent, 'de'));
  ul.replaceChildren(...items); // verschiebt die vorhandenen Knoten
};

const ul = document.querySelector('ul.aufgaben');
sortiereListe(ul);
console.log([...ul.children].map((li) => li.textContent));

["Code-Review", "Einkaufen", "Sport"]

Aufzählungszeichen per CSS statt über das veraltete type

const ul = document.querySelector('ul');

// Veraltet, nicht empfohlen:
// ul.type = 'square';

// Modern:
ul.style.listStyleType = 'square';
console.log(getComputedStyle(ul).listStyleType);

square

// Wichtig · Fallstricke

Veraltete Eigenschaften: compact und type sind veraltet. Die Browser unterstützen sie nur noch aus Kompatibilitätsgründen. Nutze stattdessen CSS (list-style-type, line-height, padding).
Kein direkter Konstruktor: new HTMLUListElement() wirft einen TypeError („Illegal constructor“). Verwende document.createElement("ul").
Gültige Kindelemente: Direkte Kinder sollten nur <li>, <script> oder <template> sein. Andere Elemente erzeugen ungültiges HTML und können Screenreader stören.
Sicherheit: Befülle Listen mit textContent oder append(). Wenn Nutzerdaten per innerHTML eingefügt werden, entsteht eine XSS-Lücke.
Barrierefreiheit: Mit list-style: none entfernt Safari/VoiceOver die Listen-Semantik. Setze in diesem Fall role="list".
Performance: Bei vielen Einträgen die Knoten zuerst in einem DocumentFragment sammeln oder append(...items) in einem Aufruf nutzen, damit das Layout nicht mehrfach neu berechnet wird.
Die Schnittstelle wird von allen Browsern unterstützt (Baseline).

Siehe auch

HTMLUnknownElement HTMLDListElement HTMLOListElement HTMLLIElement HTMLLinkElement