HTMLAllCollection — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLAllCollection

Beschreibung

HTMLAllCollection ist der Typ von document.all. Die Sammlung enthält alle Elemente des Dokuments in Dokumentreihenfolge und wird „live“ aktualisiert: Fügt man Elemente ein oder entfernt sie, ändert sich die Sammlung sofort. Auf Einträge greift man per numerischem Index (document.all[0]), über item(), über namedItem() oder direkt über den Wert eines id- bzw. name-Attributs (document.all.meinId) zu.

Die Schnittstelle stammt aus der Zeit des Internet Explorer 4 und ist heute nur noch aus Gründen der Abwärtskompatibilität vorhanden. Eine Besonderheit ist bis heute einmalig in JavaScript: document.all ist ein Objekt, verhält sich aber in booleschen Kontexten wie false und liefert bei typeof den Wert "undefined". Außerdem gilt document.all == null als true (strikt === undefined dagegen nicht). So konnten alte Browserweichen der Form if (document.all) neue Browser in den Standardzweig lenken.

Für neuen Code solltest du HTMLAllCollection nicht verwenden. Moderne Alternativen sind document.getElementById(), document.querySelector()/querySelectorAll() und document.getElementsByTagName("*"). Wichtig ist die Schnittstelle vor allem dann, wenn du alten Code pflegst oder verstehen willst, warum sich typeof document.all so merkwürdig verhält.

Mitglieder:

length – Anzahl der Elemente in der Sammlung (nur lesbar).
item(nameOrIndex) – liefert das Element am Index oder das bzw. die Elemente mit passender id/name; ohne Treffer null.
namedItem(name) – liefert das erste Element oder eine HTMLCollection mit passender id/name, sonst null.
Außerdem aufrufbar wie eine Funktion: document.all("id") entspricht item("id").

Parameter

Name	Typ	Default	Beschreibung
$nameOrIndex	string \| number		Parameter von `item()` bzw. beim Funktionsaufruf `document.all(...)`: numerischer Index oder Wert eines `id`-/`name`-Attributs. Ohne Argument wird `null` zurückgegeben.
$name Pflicht	string		Parameter von `namedItem()`: gesuchter Wert von `id` oder `name`.

Rückgabewert

Typ

Element | HTMLCollection | null

Beschreibung

item()/namedItem() liefern ein einzelnes Element, eine HTMLCollection, wenn mehrere Elemente denselben Namen bzw. dieselbe ID haben, oder null ohne Treffer. length liefert eine number.

Beispiele

Zugriff per Index, ID und item()

// HTML: <div id="hinweis">Hallo</div>
const alle = document.all;

console.log(alle.length > 0);          // Anzahl aller Elemente
console.log(alle[0].tagName);          // erstes Element: <html>
console.log(alle.hinweis.textContent); // Zugriff über die id
console.log(alle.item('hinweis') === document.getElementById('hinweis'));
console.log(alle.namedItem('gibtEsNicht'));

true HTML Hallo true null

Die kuriosen Typ-Eigenschaften von document.all

console.log(typeof document.all);          // "undefined"
console.log(Boolean(document.all));        // false
console.log(document.all == null);         // true
console.log(document.all === undefined);   // false
console.log(Object.prototype.toString.call(document.all));

undefined false true false [object HTMLAllCollection]

Mehrere Elemente mit gleichem name

// HTML: <input name="farbe" value="rot"> <input name="farbe" value="blau">
const treffer = document.all.namedItem('farbe');

if (treffer instanceof HTMLCollection) {
  const werte = Array.from(treffer, (el) => el.value);
  console.log(werte);
}

["rot", "blau"]

Alten Code modernisieren

// Alt (nicht mehr verwenden):
// const box = document.all['box'];

// Modern:
const box = document.getElementById('box');
const alleElemente = document.querySelectorAll('*');
console.log(alleElemente.length === document.all.length);

true

// Wichtig · Fallstricke

Veraltet: document.all ist nur noch aus Kompatibilitätsgründen im HTML-Standard enthalten. Nutze stattdessen getElementById() oder querySelector().
Falsy-Objekt: if (document.all) ist immer false, und typeof liefert "undefined". Prüfungen wie x ?? standardwert oder x == null behandeln document.all wie undefined. Das kann in generischen Hilfsfunktionen zu überraschenden Fehlern führen.
Live-Sammlung: Wenn du über document.all iterierst und dabei Elemente einfügst oder entfernst, verschieben sich die Indizes. Kopiere die Sammlung vorher mit Array.from().
Uneinheitlicher Rückgabetyp: Je nach Anzahl der Treffer liefern item()/namedItem() ein Element oder eine HTMLCollection. Prüfe den Typ, bevor du damit weiterarbeitest.
Kompatibilität: In allen aktuellen Browsern vorhanden, auch in Chrome, Firefox, Safari und Edge. In Node.js gibt es die Schnittstelle nicht, in jsdom nur eingeschränkt.

Siehe auch

typeof HTMLCollection HTMLOptionsCollection RTCPeerConnection HTMLAudioElement