HTMLCollection.item() — Methode · JavaScript-Referenz

Signatur

HTMLCollection.prototype.item(index)

Beschreibung

Die Methode item() liefert das Element, das sich an einem bestimmten nullbasierten Index innerhalb einer HTMLCollection befindet. Solche Sammlungen entstehen z. B. durch document.getElementsByTagName(), document.getElementsByClassName(), element.children, document.forms oder document.images.

In der Praxis ist collection.item(i) gleichwertig zum Klammerzugriff collection[i]. Der einzige Unterschied: Bei einem ungültigen Index gibt item() null zurück, der Klammerzugriff dagegen undefined. Das kann bei strikten Vergleichen (=== null) relevant sein.

Wichtig: Eine HTMLCollection ist live. Sie spiegelt Änderungen am DOM sofort wider. Ein Index, der eben noch auf ein bestimmtes Element zeigte, kann nach dem Einfügen oder Entfernen von Knoten auf ein anderes Element zeigen.

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierte Position des gewünschten Elements. Der Wert wird in eine vorzeichenlose 32-Bit-Ganzzahl umgewandelt (`unsigned long`). Negative Werte führen daher in der Praxis zu `null`.

Rückgabewert

Typ

Element | null

Beschreibung

Das Element an der angegebenen Position oder null, wenn index größer oder gleich length ist.

Beispiele

Erstes und letztes Kind-Element ermitteln

// HTML: <ul id="menu"><li>Start</li><li>Blog</li><li>Kontakt</li></ul>
const items = document.getElementById('menu').children;

const first = items.item(0);
const last = items.item(items.length - 1);

console.log(first.textContent);
console.log(last.textContent);

Start Kontakt

Unterschied zwischen item() und Klammerzugriff

const images = document.getElementsByTagName('img');

// Annahme: Die Seite enthält 2 Bilder
console.log(images.item(99));  // ungültiger Index
console.log(images[99]);       // ungültiger Index
console.log(images.item(-1));  // negativ -> wird umgewandelt, trotzdem ungültig

null undefined null

Sicher über eine live-Sammlung iterieren und Elemente entfernen

// Alle Elemente mit der Klasse "hinweis" entfernen
const hints = document.getElementsByClassName('hinweis');

// Da die Sammlung live ist, schrumpft sie beim Entfernen.
// Deshalb immer das erste Element entfernen, solange eines existiert.
while (hints.item(0) !== null) {
  hints.item(0).remove();
}

console.log(hints.length);

Formular per Index ansprechen

const form = document.forms.item(0);

if (form) {
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log(`Formular "${form.id || 'ohne ID'}" abgeschickt`);
  });
} else {
  console.log('Kein Formular auf der Seite gefunden');
}

// Wichtig · Fallstricke

Live-Sammlung: Wer in einer for-Schleife mit steigendem Index Elemente entfernt oder verschiebt, überspringt Einträge. Entweder rückwärts iterieren, item(0) wiederholt verwenden oder vorher mit Array.from(collection) eine statische Kopie anlegen.
null statt undefined: item() gibt bei ungültigem Index null zurück, collection[i] dagegen undefined. Optional Chaining (collection.item(i)?.textContent) funktioniert in beiden Fällen.
Keine negativen Indizes: Anders als Array.prototype.at() unterstützt item() kein Zählen vom Ende. item(-1) liefert null. Für das letzte Element item(collection.length - 1) verwenden.
Zugriff über Namen: Um Elemente über id oder name anzusprechen, ist namedItem() gedacht, nicht item().
Kompatibilität: Wird von allen Browsern unterstützt, auch von sehr alten. HTMLCollection hat keine Array-Methoden wie forEach; für solche Methoden vorher Array.from() oder den Spread-Operator verwenden.

Siehe auch

Element.children Array.from() HTMLCollection.namedItem() HTMLAllCollection.item() HTMLAllCollection.namedItem()