HTMLOListElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLOListElement extends HTMLElement

Beschreibung

Die Schnittstelle HTMLOListElement steht für ein <ol>-Element, also eine geordnete, nummerierte Liste. Sie erbt alle Eigenschaften und Methoden von HTMLElement, Element, Node und EventTarget und ergänzt Eigenschaften, die die HTML-Attribute der Liste widerspiegeln.

Die wichtigsten eigenen Eigenschaften sind:

start (number) – Startwert der Nummerierung, spiegelt das Attribut start (Standard 1).
reversed (boolean) – zählt die Nummern absteigend, spiegelt das Attribut reversed.
type (string) – Art der Nummerierung: "1", "a", "A", "i" oder "I".
compact (boolean) – veraltet; sollte durch CSS ersetzt werden.

Typische Einsatzgebiete sind dynamisch erzeugte Ranglisten, Countdown-Listen, Schritt-für-Schritt-Anleitungen oder paginierte Ergebnislisten, bei denen die Nummerierung auf Seite 2 z. B. bei 11 weitergehen soll. Einzelne Einträge werden als HTMLLIElement (<li>) angelegt, deren Eigenschaft value die Nummer eines einzelnen Eintrags überschreiben kann.

Instanzen entstehen über document.createElement("ol") oder beim Parsen von HTML; einen direkt aufrufbaren Konstruktor gibt es nicht (new HTMLOListElement() wirft einen TypeError).

Rückgabewert

Typ

HTMLOListElement

Beschreibung

Wird z. B. von document.createElement("ol") oder document.querySelector("ol") zurückgegeben.

Beispiele

Geordnete Liste erzeugen und konfigurieren

const ol = document.createElement("ol");
ol.type = "A";      // Nummerierung A, B, C …
ol.start = 3;        // beginnt bei C

for (const schritt of ["Vorheizen", "Teig rühren", "Backen"]) {
  const li = document.createElement("li");
  li.textContent = schritt;
  ol.append(li);
}

document.body.append(ol);
console.log(ol instanceof HTMLOListElement, ol.outerHTML);

true '<ol type="A" start="3"><li>Vorheizen</li><li>Teig rühren</li><li>Backen</li></ol>'

Countdown mit reversed

const top = document.createElement("ol");
top.reversed = true; // 3, 2, 1

["Bronze", "Silber", "Gold"].forEach((platz) => {
  top.append(Object.assign(document.createElement("li"), { textContent: platz }));
});

document.body.append(top);
console.log(top.reversed, top.hasAttribute("reversed"));

true true

Paginierte Ergebnisliste fortlaufend nummerieren

const renderSeite = (ol, eintraege, seite, proSeite = 10) => {
  ol.replaceChildren(
    ...eintraege.map((text) => {
      const li = document.createElement("li");
      li.textContent = text;
      return li;
    })
  );
  ol.start = (seite - 1) * proSeite + 1;
};

const liste = document.querySelector("ol#ergebnisse") ?? document.body.appendChild(document.createElement("ol"));
renderSeite(liste, ["Treffer A", "Treffer B"], 2);
console.log(liste.start);

11

// Wichtig · Fallstricke

new HTMLOListElement() ist nicht erlaubt (Illegal constructor) – immer document.createElement("ol") verwenden.
start liefert 1, wenn das Attribut fehlt. Bei reversed ohne start beginnt die Zählung dagegen bei der Anzahl der Einträge; die Eigenschaft start gibt dann trotzdem 1 zurück.
Die Eigenschaft type ist groß-/kleinschreibungssensitiv: "a" und "A" unterscheiden sich. Für komplexere Zählweisen (z. B. lower-greek) besser CSS list-style-type nutzen – CSS hat Vorrang vor dem Attribut.
compact ist veraltet und wird von Browsern visuell ignoriert; Abstände per CSS steuern.
Das Attribut reversed wird seit HTML5 in allen modernen Browsern unterstützt; der Internet Explorer kennt es nicht.
Die Nummerierung ist rein darstellend – Screenreader lesen sie zwar vor, sie ist aber nicht im Textinhalt (textContent) enthalten.

Siehe auch

HTMLDataListElement HTMLDListElement HTMLUListElement HTMLLIElement HTMLLinkElement