HTMLLIElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLLIElement extends HTMLElement

Beschreibung

Das Interface HTMLLIElement steht für einen Listenpunkt, also ein <li>-Element innerhalb von <ol>, <ul> oder <menu>. Neben allen geerbten Eigenschaften und Methoden von HTMLElement, Element, Node und EventTarget hat es eigene Eigenschaften für die Nummerierung.

Die wichtigste davon ist value (number). Sie spiegelt das HTML-Attribut value wider und legt die Ordinalzahl des Listenpunkts in einer geordneten Liste (<ol>) fest. Die nachfolgenden Punkte zählen von diesem Wert aus weiter. In ungeordneten Listen hat value keine sichtbare Wirkung.

Die Eigenschaft type (string) spiegelt das veraltete Attribut type wider ("1", "a", "A", "i", "I" bzw. "disc", "circle", "square"). In neuem Code nimmt man dafür die CSS-Eigenschaft list-style-type.

Sinnvoll ist das Interface vor allem, wenn man Listen dynamisch erzeugt, z. B. bei paginierten Ergebnislisten, die bei einer bestimmten Nummer weiterzählen sollen, oder wenn man bei li-Elementen gezielt die Nummerierung ausliest und ändert.

Rückgabewert

Typ

HTMLLIElement

Beschreibung

Instanzen entstehen über document.createElement("li") oder über Abfragen wie querySelector("li"). Einen direkt aufrufbaren Konstruktor gibt es nicht.

Beispiele

Listenpunkt erzeugen und anhängen

const list = document.createElement('ol');
const items = ['Mehl', 'Zucker', 'Eier'];

for (const text of items) {
  const li = document.createElement('li');
  li.textContent = text;
  list.append(li);
}

document.body.append(list);
console.log(list.firstElementChild instanceof HTMLLIElement);

true

Paginierte Liste mit value weiterzählen lassen

// Seite 3 mit je 10 Einträgen soll bei 21 beginnen
const renderPage = (entries, page, pageSize = 10) => {
  const ol = document.querySelector('#results');
  ol.replaceChildren();
  entries.forEach((entry, i) => {
    const li = document.createElement('li');
    li.textContent = entry;
    if (i === 0) li.value = (page - 1) * pageSize + 1;
    ol.append(li);
  });
  return ol.firstElementChild.value;
};

console.log(renderPage(['Ergebnis A', 'Ergebnis B'], 3));

21

value auslesen und Attribut vergleichen

// HTML: <ol><li>Eins</li><li value="5">Fünf</li><li>Sechs</li></ol>
const [first, second, third] = document.querySelectorAll('ol > li');

console.log(first.value);                 // kein Attribut gesetzt
console.log(second.value);                // aus dem Attribut
console.log(second.getAttribute('value'));
console.log(third.value);                 // nicht berechnet!

0 5 "5" 0

Aufzählungsstil per CSS statt über das veraltete type

const li = document.querySelector('ol > li');

// Veraltet, funktioniert aber noch:
li.type = 'A';

// Empfohlen:
li.style.listStyleType = 'upper-alpha';
console.log(li.type, li.style.listStyleType);

A upper-alpha

// Wichtig · Fallstricke

value ist nicht die angezeigte Nummer: Ist das Attribut nicht gesetzt, gibt die Eigenschaft 0 zurück und nicht die tatsächlich dargestellte Position. Die berechnete Nummer muss man selbst ermitteln, z. B. über den Index in parentElement.children sowie start/reversed der Liste.
Ein gesetzter value-Wert gilt auch für alle folgenden Punkte, die dann von ihm aus weiterzählen. Er muss eine ganze Zahl sein, Nachkommastellen werden abgeschnitten.
Bei <ol reversed> wird von value aus abwärts gezählt.
type gilt als veraltet. Für die Darstellung nimmt man list-style-type in CSS.
Die Nummerierung über value ist Teil der Semantik und wird von Screenreadern vorgelesen. Eine reine CSS-Zählung über counter() ist das nicht unbedingt.
Kompatibilität: HTMLLIElement und value werden von allen aktuellen Browsern unterstützt.

Siehe auch

Element.prototype.append() HTMLHRElement HTMLBRElement HTMLDivElement HTMLElement