JavaScript/DOM/Document/images
Mit dem Objekt images haben Sie Zugriff auf alle mit dem <img> Element Grafiken, die in einer HTML-Datei definiert sind. Dabei können Sie auch vorhandene Grafiken dynamisch durch andere ersetzen.
Inhaltsverzeichnis
Verwendung
document.images stellt eine HTMLCollection bereit, die alle img Elemente des Dokuments enthält. Grafiken, die mit CSS als Hintergrundgrafiken eingebunden wurden, oder mittels des object Elements, sind nicht Teil der images-Collection. Die Collection ist – wie alle HTMLCollections, live, d. h. sobald ein neues img-Element ins Dokument kommt, ist es auch in images zu finden. Die images-Collection ist schreibgeschützt, d. h. Sie können keine Elemente anhängen und keine ersetzen (was nicht bedeutet, dass Sie nicht Eigenschaften einzelner Einträge verändern können).
Die images-Collection hat heute nur noch Museumswert. Sie stammt aus Zeiten von Netscape 2 und DOM Level 0, wo es eine Methode wie getElementById oder getElementsByTagName noch nicht gab. Netscape hatte mit images einen Vorsprung gegenüber Internet Explorer, dessen all Collection sämtliche Elemente enthielt, aus denen man die Bilder erst heraussuchen musste. Um alte Seiten weiter anzeigen zu können, wird die Collection auch von den heutigen Browser noch unterstützt.
Heute würde man eine HTMLCollection aller img-Elemente mit document.getElementsByTagName('img') ermitteln. Eine statische NodeList bekommt man mit document.querySelectorAll('img').
Die Frage ist nur, ob es überhaupt einen Anwendungszweck dafür gibt, auf sämtliche Bilder im Dokument zuzugreifen. Der typischere Anwendungszweck wäre das Lokalisieren von Bildern in bestimmten Teilen des DOM, wofür sich die beiden genannten Methoden ebenfalls besser eignen, weil sie auf jedem Element anwendbar sind und nicht nur auf dem Dokument selbst.
Ein Image Objekt aufrufen
Das folgende HTML soll Grundlage für die nachfolgenden Codebeispiele sein:
<body>
<header>
<img id="foo" name="anna" src="..." alt="...">
<header>
<main>
<img id="bar" name="lena" src="..." alt="...">
<img id="baz" name="elli" src="..." alt="...">
</main>
</body>
Sie können die images Collection auf verschiedene Arten nutzen, um darüber img-Elemente aufzusuchen. Die Codebeispiele zeigen auch immer, welche Alternative es in modernerem JavaScript gibt.
Über die laufende Nummer im Dokument. Zurückgegeben wird jeweils ein Objekt mit dem HTMLImageElement Interface.
let bild1 = document.images[2];
let bild2 = document.getElementsByTagName('img')[2];
Über den Wert des id-Attributes
let bild1a = document.images.baz;
let bild1b = document.images['baz'];
let bild1c = document.images.namedItem('baz');
let bild2a = document.getElementById('baz');
let bild2b = document.querySelector('#baz');
Über den Wert des name-Attributs. – hier ist zu beachten, dass ein Namenszugriff über die images-Collection nur das erste Bild mit diesem Wert des name-Attributes liefert, die neueren DOM Methoden dagegen eine HTMLCollection mit allen Bilder, die unter diesem Namen zu finden sind.
let bild1a = document.images.elli;
let bild1b = document.images['elli'];
let bild1c = document.images.namedItem('elli');
let bilder2a = document.getElementsByName('elli');
let bilder2b = document.querySelector('img[name=elli]');
Sie sehen ein Problem der images-Collection: Man kann nicht zwischen dem Zugriff über id oder name unterscheiden. Gibt es Bilder, wo der name des einen die id des anderen ist, so hat die id Vorrang.
Ein Image Objekt erzeugen oder verändern
Sie erzeugen Image-Objekte wie jedes andere DOM Objekt über die Funktion createElement(). Beispiele finden Sie im verlinkten Wiki-Artikel.
Außerdem gibt es noch den Image Konstruktor, mit dem Sie ebenfalls ein Image-Objekt anlegen können. Auch dieser Konstruktor ist als Museumsstück anzusehen. Die beiden folgenden Codestücke tun das gleiche.
let bild = new Image(24,24);
bild.src = 'https://example.org/test/bild.jpg';
let bild = document.createElement('img');
bild.width = 24;
bild.height = 24;
bild.src = 'https://example.org/test/bild.jpg';
Wenn Sie die natürliche Bildgröße verwenden wollen, rufen Sie den Image-Konstruktor ohne Parameter auf.
Sie können solche Image-Objekte nicht direkt in die images-Collection eintragen oder ein bestehendes Bild ersetzen. Um Objekte ins DOM aufzunehmen oder zu ersetzen, sind die Methoden appendChild, insertBefore oder replaceChild des gewünschten Elternelements zu verwenden.
Wenn Sie nur die Bildquelle oder ein Attribut eines Image-Objekts verändern wollen, dann ist es allerdings gleichgültig, auf welche Weise Sie sich das Objekt beschafft haben. Das Ändern eines Image-Objekts ist kein Ändern der images-Collection und jederzeit möglich.
Weblinks
- W3C: images
- MDN: document.images
