JavaScript/Tutorials/DOM/DOM-Manipulation
- 30min
- mittel
- Kenntnisse in
Wenn ein Anwender mit der Webseite interagiert, ist es oft nötig, je nach erfolgter Eingabe unterschiedliche Inhalte zur Verfügung zu stellen.
So könnte ein Login flexibel werden: Wenn der Benutzer schon registriert ist, kann er nach dem Einloggen einfach weitermachen, für neue Nutzer werden je nach Stand der Eingabe unterschiedliche Inhalte wie ein Anmeldeformular dynamisch nachgeladen.
Auch bei einem Bildwechsler benötigt man die Zurück und Weiter-Buttons erst in der Großansicht.
Dieses Tutorial zeigt, wie Sie Ihre Webseite dynamisch erweitern, indem Sie neue Elemente erzeugen und in die Webseite einfügen.
Inhaltsverzeichnis
Elemente dynamisch erzeugen
Gerade bei Spielen wird das Spielfeld oft erst geladen, wenn der Benutzer die Spielanleitung oder den bisherigen Punktestand (Highscore) gelesen hat, da das Hin- und Herklicken zwischen verschiedenen Webseiten zu umständlich wäre.
Hierfür können Sie Inhalte dynamisch ausgeben, indem Sie HTML-Elemente erzeugen, mit Inhalt füllen und in das DOM der Webseite einhängen:
<button id="button">Drück mich!</button>
<div id="textblock">
<p>Dies ist ein Textblock, dem dynamisch weitere Absätze angehängt werden können.</p>
</div>
document.addEventListener('DOMContentLoaded', function () {
let text = 'Dies ist ein neuer Absatz';
document.getElementById('button').addEventListener('click', createElement);
function createElement(){
let container = document.getElementById('textblock');
let newElm = document.createElement('p');
newElm.innerText = text;
container.appendChild(newElm);
}
});
Das Script ruft auf Klick die Funktion createElement() auf.
Dies erzeugt mit createElement ein neues p-Element und weist es der Variablen newElm zu. Dem Absatz wird mit innerText eine in der Variablen text enthaltenen Zeichenkette als Textknoten an das Element hinzugefügt. Anschließend wird das so dynamisch erzeugte Element mit appendChild in das DOM eingehängt.
Wenn Sie es mit der Konsole untersuchen, werden Sie keinen Unterschied zu normalen Textabsätzen finden.
eine Helferfunktion für neue Elemente
Mit der oberen Funktion konnten neue Absätze erzeugt werden. Für den Alltagseinsatz benötigt man aber eine Helfer-Funktion, mit der beliebige neue Elemente an beliebigen Stellen im DOM erzeugt werden.
document.addEventListener('DOMContentLoaded', function () {
let text1 = 'Dies ist ein neuer Absatz!';
let text2 = 'Dies ist ein neuer Button!';
document.getElementById('button1').addEventListener('click', function() {
createElement('#textblock', 'p', text1);
});
document.getElementById('button2').addEventListener('click', function() {
createElement('#textblock', 'button', text2);
});
function createElement(parent,elem, content){
let container = document.querySelector(parent);
let newElm = document.createElement(elem);
newElm .innerText = content;
container.appendChild(newElm );
}
});
Die Funktion createElement() wurde jetzt so erweitert, dass ihr Parameter übergeben werden können.
Beim Anhängen der Event-Handler wird addEventListener als zweiter Parameter eine anonyme Funktion übergeben, in der unsere Parameter gekapselt sind.
- Der erste Parameter
parentbestimmt, an welcher Stelle im Elementbaum das neue Element eingehängt wird. -
elemlegt fest, welches Element erzeugt wird. -
contentübergibt einen Inhalt, der dann als Textknoten eingefügt wird.
Ein Manko dieser Helferfunktion ist die fehlende Möglichkeit, weitere Klassen und Attribute festzulegen. So würde bei einem Bild oder einem Link ja zwingend eine URL benötigt.
Solche Helferfunktionen können Sie sich aber bei github kopieren oder selbst zusammenstellen.
Elemente dynamisch entfernen
Sie können Elemente dynamisch erzeugen - sie aber auch dynamisch wieder entfernen. Dafür müssen Sie mit der parentNode-Eigenschaft den Elternknoten finden und dann dessen Kind (also das gewünschte Element) mit removeChild wieder entfernen.
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('click', removeElement);
function removeElement(e) {
let elem = e.target;
let main = document.querySelector('main');
if (main != elem) {
let parent = elem.parentNode;
parent.removeChild( elem);
return false;
}
}
});
In diesem Beispiel können Sie einzelne Elemente aus der Webseite löschen. Dafür wird mit event.target ermittelt, in welchem Element das Ereignis aufgetreten ist und dieser Wert der Variable elem zugewiesen.
Damit nicht die gesamte Seite gelöscht wird, überprüft man in einer bedingten Anweisung, ob das geklickte Ereignis im main-Element auftrat.
Bei allen anderen Elementen wird mit parentNode der Elternknoten ermittelt und dann mit removeChild(elem) das angeklickte Element entfernt.
Helferfunktion
function removeElement(elem) {
let body = document.querySelector('body');
if (body != elem) {
let parent = elem.parentNode;
parent.removeChild( elem);
return false;
}
}
Diese Helferfunktion löscht jedes übergebene Element, überprüft aber, ob es sich dabei um den body handelt. In diesem Falle würde nichts entfernt werden.
Bildwechsler
Die oben gezeigten Methoden wollen wir nun in einem weiterführenden Anwendungsbeispiel ausprobieren: Im SELF-Forum wurde gefragt, wie man einen Bildwechsler (image-slider) programmiert, der sich mehrfach laden lässt. Deshalb wollen wir für eine Webseite mit mehreren Bildergruppen ein Script programmieren, das …
- das ausgewählte Bild in einer Großansicht zeigt
- Buttons zur Verfügung stellt, die eine weitere Auswahl durch den Nutzer ermöglichen.
- erkennt, welche Bildergruppe angeklickt wird
HTML-Markup
Da es in JavaScript nicht möglich ist, auf Unterseiten oder das Dateiverzeichnis des Servers zuzugreifen, sollten die Bilder (oder deren URLs) schon auf der Webseite notiert sein.
<section id="peru" class="gallery">
<h2>Peru 2007</h2>
<a href="peru-3.jpg">
<img src="peru-3-sm.jpg" alt="Peru 2007: Machu Picchu">
</a>
<a href="peru-4.jpg">
<img src="peru-4-sm.jpg" alt="Peru 2007: Machu Picchu - Lamas in den Ruinen">
</a>
<a href="peru-5.jpg">
<img src="peru-5-sm.jpg" alt="Peru 2007: Uros-Inseln im Titicaca-See">
</a>
...
</section>
Dieses HTML funktioniert bereits ohne JavaScript:
Das im img notierte kleine Bild wird angezeigt. Bei einem Klick darauf wird das im a-Element referenzierte große Bild geladen und im Browser angezeigt. So wird das im letzten Kapitel erwähnte Standardverhalten der HTML-Elemente genutzt.
.gallery a bzw. .gallery img kann jedes Element mit CSS oder JavaScript selektiert werden.Bildertausch mit JavaScript
MIt einem Script soll die im href-Attribut notierte URL des großen Bilds für eine Darstellung innerhalb der Webseite genutzt werden.
document.querySelector('.gallery').addEventListener('click',function (evt) {
evt.preventDefault();
let element = event.target;
let parentURL = element.parentNode.href;
element.src = parentURL;
element.classList.add('current');
});
Nach den Regeln des unobtrusive JavaScript wird das Script nicht mit dem HTML vermischt, sondern im head notiert.
Mit AddEventHandler wird dem angeklickten Element eine Funktion zugewiesen.
Diese Funktion …
- verhindert mit Event.preventDefault das Aufrufen des Links
- ermittelt das auslösende Element
- ermittelt mit parentNode das Elternelement des Bilds, liest die URL des href-Attributs aus und …
- setzt diese in das src-Attribut des angeklickten Bilds.
- Damit dies größer dargestellt wird, erhält es mit classList.add() eine neue Klasse.
Mit jedem geklickten Bild wird ein weiteres mit der Klasse current (engl. für 'aktuell') auf Großansicht umgestellt, die bereits geklickten bleiben groß.
Eine solche Klasse kann man aber auch wieder entfernen:
1 let allPics = document.querySelectorAll('.gallery img');
2 console.log('Anzahl Bilder: ' + allPics.length)
3
4 document.querySelector('.gallery').addEventListener('click',function (evt) {
5 evt.preventDefault();
6 let element = event.target,
7 parentURL = element.parentNode.href;
8 // bisherige Klassenzuweisungen entfernen
9 for (let pic of allPics) {
10 pic.classList.remove('current');
11 };
12 // dem ausgewählten Bild die URL der Großansicht und die Klasse 'current' zuweisen
13 element.src = parentURL;
14 element.classList.add('current');
15 // get the number
16 let idx = index(element);
17 console.log('geklicktes Bild: ' + idx);
18 });
19
20 function index(el) {
21 for (let i=0; i < allPics.length; i++) {
22 if (allPics[i] == el) {
23 return i;
24 }
25 }
26 return -1;
27 }
Mit querySelectorAll können wir alle Elemente, die vom Selektor .gallery img, also alle img-Elemente, die Kinder und Kindeskinder des Elements mit der Klasse gallery sind, finden. Das Ergebnis wird als statische NodeList der Variable allPics zugewiesen.
Vor die dynamische Großansicht schieben wir nun in Zeile 9 eine for...of-Schleife ein, die alle Bilder durchläuft und ihnen mit classList.remove() die eventuell vorhandene Klasse current entfernt.
Störend wirkt aber, dass die thumbnails sowohl ober- als auch unterhalb der Großansicht dargestellt sind. Dies soll im nächsten Schritt verbessert werden.
Siehe auch
- Bildwechsler
- Web Animations (WAAPI)
- Animieren in JavaScript
- Animationen steuern
- Fullscreen-Ansicht
(Bild mit Lightbox-Effekt)
