JavaScript/DOM/HTMLCollection

Eine HTMLCollection ist eine Sammlung von Elementen im DOM. Der Name ist historisch bedingt – auch andere Dokumentarten (beispielsweise XML) besitzen ein DOM und auch dort werden HTMLCollection-Objekte verwendet. Diesen Collection-Typ gibt es seit den ersten Versionen des DOM und alle Browser unterstützen ihn, er wird aber mittlerweile als Irrweg betrachtet. Neuere Programmierschnittstellen verwenden NodeList-Objekte oder einen Iterator.

HTMLCollections erhalten Sie von einigen Methoden oder Eigenschaften des DOM zurückgeliefert. Das eigenständige Anlegen solcher Collections ist nicht vorgesehen. Die Besonderheit einer HTMLCollection ist, dass sie eine Liveansicht auf eine bestimmte Menge von Elementen darstellt. Beispielsweise liefert die Eigenschaft document.images eine HTMLCollection mit allen Bildern im Dokument in Form, und selbst wenn Sie diese Collection in einer Variable hinterlegen und danach weitere Bilder ins DOM bringen, sind die neuen Bilder automatisch in der images-Collection enthalten.

Die live-Eigenschaft kann zu Schwierigkeiten führen (Elemente werden übersprungen oder doppelt verarbeitet), wenn Sie die HTMLCollection in einer Schleife verarbeiten möchten und in dieser Schleife das DOM manipulieren. Vielfach wird deshalb empfohlen, eine HTMLCollection vor dem Durchlaufen zunächst in ein Array zu kopieren. Dafür kann Array.from() verwendet werden.

Eigenschaften und Methoden

Ein HTMLCollection-Objekt hat nur wenige Eigenschaften. Die length-Eigenschaft und der Indexzugriff mit [] sind aber hinreichend, ein Array-ähnliches-Objekt daraus zu machen, so dass sich etliche Array-Operationen darauf anwenden lassen.

length

Die length-Eigenschaft einer HTMLCollection gibt an, wieviele Elemente sie enthält.

Indexzugriff mit []

Die Elemente einer HTMLCollection können zum einen über ihre Indexposition angesprochen werden. Die Indexposition beginnt bei 0. Der höchste vergebene Index ist demzufolge eins kleiner als der Wert der length-Eigenschaft. Die Nummerierung der Elemente erfolgt in der Reihenfolge, wie sie beim Durchlaufen des DOM in Baumreihenfolge angetroffen werden.

Element über Indexposition ansprechen

   const bild = document.images[0];   /* Das erste Bild im Dokument */

Außer über ihre Indexposition können HTMLCollection-Elemente auch über ihren Namen angesprochen werden. Diesen Namen ermittelt der Browser über die Attribute id und name der Elemente, die Teil der HTMLCollection sind. Dabei kann es zu Konflikten kommen. Wird ein Name sowohl in einem id- wie auch in einem name-Attribut verwendet, hat das id-Attribut Vorrang. Verwenden mehrere Elemente den gleichen Namen, hat das erste Element Vorrang.

Wenn der Elementname den Regeln für Eigenschaftsnamen von JavaScript folgt, können Sie anstelle der Indexnotation auch die bei Objekteigenschaften übliche Punktnotation verwenden!

Element über ihren Namen ansprechen

	<img src="hund.png" alt="..." name="hund">
	<img src="katze.png" alt="..." id="hund">
	<img src="amsel.png" alt="..." name="vogel">
	<img src="drossel.png" alt="..." name="vogel">
	<img src="forelle.png" alt="..." name="fisch-im-wasser">

	<script>
	const bild1 = document.images.hund,                 /* katze.png !!! */
		  bild2 = document.images.vogel,                /* amsel.png */
		  bild3 = document.images.fisch-im-wasser,      /* ERROR - nicht möglich */
		  bild4 = document.images['fisch-im-wasser'];   /* forelle.png */
	</script>

item()

Die item-Methode ist ein Synonym für den Zugriff über die Indexposition. In JavaScript wird sie nicht benötigt, es gab früher™ aber andere Scriptsprachen, die diese Methode benötigten.

Element über item() ansprechen

   const bild = document.images.item(0);   /* Das erste Bild im Dokument */

namedItem()

Die namedItem-Methode ist ein Synonym für den Zugriff über den Elementnamen.

Element über item() ansprechen

   const bild = document.images.namedItem('hund');   /* Wieder mal für die Katz */

Siehe auch

• DOM Spezifikation: Interface HTMLCollection (englisch)