NodeList.item() — Methode · JavaScript-Referenz

Signatur

NodeList.prototype.item(index)

Beschreibung

Die Methode item() liefert den Knoten an Position index einer NodeList. Die Zählung beginnt bei 0. Solche Listen bekommt man zum Beispiel von document.querySelectorAll() oder über Node.childNodes.

In modernem JavaScript schreibt man meist die Klammer-Schreibweise list[index]. Beide Wege liefern bei einem gültigen Index denselben Knoten. Sie unterscheiden sich nur bei ungültigen Indizes: item() gibt dann null zurück, die Klammer-Schreibweise undefined. Das kann bei strengen Vergleichen wie === null eine Rolle spielen.

item() ist nützlich, wenn der Code ausdrücklich zeigen soll, dass es um eine DOM-Schnittstelle geht, oder wenn er auch mit älteren DOM-Implementierungen funktionieren muss. Ein Beispiel dafür sind XML-Parser in Node.js wie xmldom, die keinen Zugriff über den Index anbieten.

Beachte, ob die Liste live oder statisch ist. childNodes ist live und ändert sich mit dem DOM. Das Ergebnis von querySelectorAll() ist statisch. Bei einer Live-Liste kann item(i) nach einer DOM-Änderung also einen anderen Knoten liefern.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Position des gewünschten Knotens, beginnend bei `0`. Der Wert wird in eine vorzeichenlose 32-Bit-Ganzzahl umgewandelt (`unsigned long`).

Rückgabewert

Typ

Node | null

Beschreibung

Der Knoten an der angegebenen Position oder null, wenn index >= list.length ist.

Beispiele

Ersten Listeneintrag auslesen

// HTML: <ul><li>Äpfel</li><li>Birnen</li><li>Kirschen</li></ul>
const items = document.querySelectorAll('li');

console.log(items.item(0).textContent);
console.log(items[1].textContent); // gleichwertige Klammer-Schreibweise
console.log(items.item(10));       // außerhalb des Bereichs
console.log(items[10]);

Äpfel Birnen null undefined

Über eine NodeList iterieren und Zeilen markieren

const rows = document.querySelectorAll('table tbody tr');

for (let i = 0; i < rows.length; i++) {
  const row = rows.item(i);
  // jede zweite Zeile hervorheben
  if (i % 2 === 1) row.classList.add('zebra');
}

console.log(`${rows.length} Zeilen verarbeitet`);

5 Zeilen verarbeitet

Sicherer Zugriff mit null-Prüfung

const getNthChild = (parent, n) => {
  const node = parent.childNodes.item(n);
  if (node === null) {
    console.warn(`Kein Kindknoten an Position ${n}`);
    return null;
  }
  return node;
};

const container = document.createElement('div');
container.innerHTML = '<p>Eins</p><p>Zwei</p>';

console.log(getNthChild(container, 1).textContent);
getNthChild(container, 5);

Zwei Kein Kindknoten an Position 5

Live-NodeList: Index verschiebt sich

const list = document.createElement('ul');
list.innerHTML = '<li>A</li><li>B</li>';
const nodes = list.childNodes; // live!

console.log(nodes.item(0).textContent);
list.prepend(document.createElement('li'));
list.firstChild.textContent = 'Neu';
console.log(nodes.item(0).textContent);

A Neu

// Wichtig · Fallstricke

Negative Indizes: item(-1) gibt nicht das letzte Element zurück. Der Wert wird zu einer sehr großen vorzeichenlosen Zahl umgewandelt, das Ergebnis ist daher null. Für den Zugriff von hinten wandelst du die Liste zuerst in ein Array um: [...list].at(-1).
Fehlendes Argument: Wird item() ohne Argument aufgerufen, wirft die Methode einen TypeError. item(undefined) dagegen wird wie item(0) behandelt.
null und undefined: item() gibt bei einem ungültigen Index null zurück, list[i] gibt undefined. Strenge Vergleiche fallen deshalb unterschiedlich aus. Optional Chaining (list.item(i)?.textContent) funktioniert mit beiden.
Live-Listen: Wenn du Knoten aus einer Live-Liste wie childNodes entfernst, während du vorwärts darüber iterierst, werden Knoten übersprungen. Iteriere dann rückwärts oder kopiere die Liste vorher mit Array.from().
Textknoten: childNodes enthält auch Leerraum- und Kommentarknoten. Wenn du nur Elemente brauchst, nimm children (eine HTMLCollection).
Kompatibilität: Wird von allen Browsern unterstützt, auch von sehr alten.

Siehe auch

NodeList NodeList.length NodeList.forEach() Document.querySelectorAll() Node.childNodes HTMLCollection.item() Array.prototype.at()