HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
View in English Always switch to English
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die HTMLCollection-Schnittstelle repräsentiert eine generische Sammlung (Array-ähnliches Objekt ähnlich wie arguments) von Elementen (in Dokumentreihenfolge) und bietet Methoden und Eigenschaften zum Auswählen aus der Liste.
HTMLCollection
arguments
Eine HTMLCollection im HTML-DOM ist live; sie wird automatisch aktualisiert, wenn das zugrunde liegende Dokument geändert wird. Aus diesem Grund ist es eine gute Idee, eine Kopie zu erstellen (z. B. mit Array.from), um darüber zu iterieren, falls Sie Knoten hinzufügen, verschieben oder entfernen.
Array.from
Diese Schnittstelle wird aus historischen Gründen HTMLCollection genannt, da vor der modernen DOM-Implementierung Sammlungen, die diese Schnittstelle implementierten, nur HTML-Elemente als ihre Elemente haben konnten.
Diese Schnittstelle war ein Versuch, eine nicht modifizierbare Liste zu erstellen und wird nur weiterhin unterstützt, um Code nicht zu brechen, der sie bereits verwendet. Moderne APIs repräsentieren Listenstrukturen mit Typen, die auf JavaScript-Arrays basieren, wodurch viele Array-Methoden verfügbar werden und gleichzeitig zusätzliche Semantiken für ihre Verwendung auferlegt werden (wie die Festlegung, dass ihre Elemente schreibgeschützt sind).
Diese historischen Gründe bedeuten nicht, dass Sie als Entwickler HTMLCollection vermeiden sollten. Sie erstellen HTMLCollection-Objekte nicht selbst, sondern erhalten sie von APIs wie Document.getElementsByClassName(), und diese APIs sind nicht veraltet. Seien Sie jedoch vorsichtig mit den semantischen Unterschieden zu einem echten Array.
Document.getElementsByClassName()
HTMLCollection.length
Gibt die Anzahl der Elemente in der Sammlung zurück.
HTMLCollection.item()
Gibt das spezifische Element an der gegebenen nullbasierten index-Position in der Liste zurück. Gibt null zurück, wenn der index außerhalb des Bereichs liegt.
index
null
Eine Alternative zum Zugriff auf collection[i] (was stattdessen undefined zurückgibt, wenn i außerhalb des Bereichs liegt). Dies ist hauptsächlich nützlich für nicht-JavaScript-DOM-Implementierungen.
collection[i]
undefined
i
HTMLCollection.namedItem()
Gibt den spezifischen Knoten zurück, dessen ID oder, falls dies nicht möglich ist, Name mit der durch name angegebenen Zeichenfolge übereinstimmt. Das Zuordnen nach Name erfolgt nur als letzter Ausweg, nur in HTML und nur, wenn das referenzierte Element das name-Attribut unterstützt. Gibt null zurück, wenn kein Knoten mit dem angegebenen Namen existiert.
name
Eine Alternative zum Zugriff auf collection[name] (was stattdessen undefined zurückgibt, wenn name nicht existiert). Dies ist hauptsächlich nützlich für nicht-JavaScript-DOM-Implementierungen.
collection[name]
HTMLCollection bietet auch Zugriff auf seine Mitglieder als Eigenschaften nach Namen und Index. HTML-IDs können : und . als gültige Zeichen enthalten, was die Verwendung der Klammernotation für den Eigenschaftszugriff erforderlich machen würde. Derzeit erkennt ein HTMLCollection-Objekt keine rein numerischen IDs, die zu einem Konflikt mit dem array-ähnlichen Zugriff führen würden, obwohl HTML diese erlaubt.
:
.
Zum Beispiel, angenommen es gibt ein <form>-Element im Dokument und seine id ist myForm:
<form>
id
myForm
let elem1, elem2; // document.forms is an HTMLCollection elem1 = document.forms[0]; elem2 = document.forms.item(0); alert(elem1 === elem2); // shows: "true" elem1 = document.forms.myForm; elem2 = document.forms.namedItem("myForm"); alert(elem1 === elem2); // shows: "true" elem1 = document.forms["named.item.with.periods"];
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
NodeList
HTMLFormControlsCollection
HTMLOptionsCollection