## Aufgabe
Sie haben eine Einkaufsliste in Ihrem HTML und müssen bestimmte Elemente mit verschiedenen DOM-Abfragemethoden auswählen.
1. **Nach ID auswählen**: Wählen Sie das `<h1>`-Element mit der ID `title` aus;
2. **Nach Klasse auswählen**: Wählen Sie alle Elemente mit der Klasse `item` aus;
3. **Nach Tag auswählen**: Wählen Sie alle `<li>`-Elemente aus;
4. **Das erste übereinstimmende Element auswählen**: Wählen Sie das erste `<li>`-Element mit der Klasse `item` aus;
5. **Alle übereinstimmenden Elemente auswählen**: Wählen Sie alle `<li>`-Elemente mit der Klasse `item` aus.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxIGlkPSJ0aXRsZSI+U2hvcHBpbmcgTGlzdDwvaDE+CiAgICA8dWw+CiAgICAgIDxsaSBjbGFzcz0iaXRlbSI+TWlsazwvbGk+CiAgICAgIDxsaSBjbGFzcz0iaXRlbSI+RWdnczwvbGk+CiAgICAgIDxsaSBjbGFzcz0iaXRlbSI+QnJlYWQ8L2xpPgogICAgICA8bGkgY2xhc3M9Iml0ZW0iPkJ1dHRlcjwvbGk+CiAgICA8L3VsPgogICAgPCEtLSBEaXNwbGF5IFJlc3VsdHMgLS0+CiAgICA8ZGl2PgogICAgICA8cCBpZD0ic2VsZWN0ZWQtdGl0bGUiPjwvcD4KICAgICAgPHAgaWQ9InNlbGVjdGVkLWl0ZW1zLWNvdW50Ij48L3A+CiAgICAgIDxwIGlkPSJmaXJzdC1saS10YWciPjwvcD4KICAgICAgPHAgaWQ9ImZpcnN0LWl0ZW0iPjwvcD4KICAgICAgPHAgaWQ9ImFsbC1pdGVtcy1jb3VudCI+PC9wPgogICAgPC9kaXY+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdTZWdvZSBVSScsIFRhaG9tYSwgR2VuZXZhLCBWZXJkYW5hLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY2Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGNvbG9yOiAjMzMzOwp9CgojdGl0bGUgewogIGZvbnQtc2l6ZTogMi41cmVtOwogIGNvbG9yOiAjM2E4YmNkOwogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7CiAgbWFyZ2luLWJvdHRvbTogMXJlbTsKICBsZXR0ZXItc3BhY2luZzogMS4ycHg7Cn0KCnVsIHsKICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICBtYXJnaW46IDAgMCAycmVtIDA7CiAgd2lkdGg6IDMyMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIG92ZXJmbG93OiBoaWRkZW47Cn0KCi5pdGVtIHsKICBwYWRkaW5nOiAxNnB4OwogIGZvbnQtc2l6ZTogMS4xcmVtOwogIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZTBlNGU3OwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCBjb2xvciAwLjNzIGVhc2U7Cn0KCi5pdGVtOmxhc3QtY2hpbGQgewogIGJvcmRlci1ib3R0b206IG5vbmU7Cn0KCi5pdGVtOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDNlOWY1OwogIGNvbG9yOiAjMjY3ZWJkOwogIGN1cnNvcjogcG9pbnRlcjsKfQoKZGl2IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIHBhZGRpbmc6IDE2cHg7CiAgd2lkdGg6IDMyMHB4OwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBib3gtc2hhZG93OiAwIDRweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKICB0ZXh0LWFsaWduOiBsZWZ0Owp9Cgojc2VsZWN0ZWQtdGl0bGUsCiNzZWxlY3RlZC1pdGVtcy1jb3VudCwKI2ZpcnN0LWxpLXRhZywKI2ZpcnN0LWl0ZW0sCiNhbGwtaXRlbXMtY291bnQgewogIGZvbnQtc2l6ZTogMXJlbTsKICBtYXJnaW46IDhweCAwOwp9Cgojc2VsZWN0ZWQtdGl0bGUgewogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAjMjhhNzQ1Owp9Cgojc2VsZWN0ZWQtaXRlbXMtY291bnQgewogIGNvbG9yOiAjMTdhMmI4Owp9CgojZmlyc3QtbGktdGFnIHsKICBjb2xvcjogI2ZmYzEwNzsKfQoKI2ZpcnN0LWl0ZW0gewogIGNvbG9yOiAjZGMzNTQ1Owp9CgojYWxsLWl0ZW1zLWNvdW50IHsKICBjb2xvcjogIzZjNzU3ZDsKfQ==

Ly8gU2VsZWN0IGJ5IElECmNvbnN0IHRpdGxlRWwgPSBkb2N1bWVudC5fX19fXyhfX19fXyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdzZWxlY3RlZC10aXRsZScKKS50ZXh0Q29udGVudCA9IGBTZWxlY3RlZCB0aXRsZTogJHt0aXRsZUVsLnRleHRDb250ZW50fWA7CgovLyBTZWxlY3QgYnkgQ2xhc3MKY29uc3QgaXRlbUVscyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3NlbGVjdGVkLWl0ZW1zLWNvdW50JwopLnRleHRDb250ZW50ID0gYE51bWJlciBvZiBpdGVtcyB3aXRoIGNsYXNzICdpdGVtJzogJHtpdGVtRWxzLmxlbmd0aH1gOwoKLy8gU2VsZWN0IGJ5IFRhZwpjb25zdCBsaUVscyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWxpLXRhZycKKS50ZXh0Q29udGVudCA9IGBGaXJzdCB0YWcgbmFtZTogJHtsaUVsc1swXS50YWdOYW1lfWA7CgovLyBTZWxlY3QgdGhlIGZpcnN0IGl0ZW0KY29uc3QgZmlyc3RJdGVtRWwgPSBkb2N1bWVudC5fX19fXyhfX19fXyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1pdGVtJwopLnRleHRDb250ZW50ID0gYEZpcnN0IGl0ZW0gdGV4dDogJHtmaXJzdEl0ZW1FbC50ZXh0Q29udGVudH1gOwoKLy8gU2VsZWN0IGFsbCBpdGVtcwpjb25zdCBhbGxJdGVtcyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2FsbC1pdGVtcy1jb3VudCcKKS50ZXh0Q29udGVudCA9IGBUb3RhbCBpdGVtcyBzZWxlY3RlZCB3aXRoIHF1ZXJ5U2VsZWN0b3JBbGw6ICR7YWxsSXRlbXMubGVuZ3RofWA7

- Verwenden Sie `getElementById`, um das `<h1>`-Element mit der ID `title` auszuwählen;
- Verwenden Sie `getElementsByClassName`, um alle Elemente mit der Klasse `item` auszuwählen;
- Verwenden Sie `getElementsByTagName`, um alle `<li>`-Elemente auszuwählen;
- Verwenden Sie `querySelector`, um das erste `<li>`-Element mit der Klasse `item` auszuwählen;
- Verwenden Sie `querySelectorAll`, um alle `<li>`-Elemente mit der Klasse `item` auszuwählen.

Ly8gU2VsZWN0IGJ5IElECmNvbnN0IHRpdGxlRWwgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGl0bGUnKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3NlbGVjdGVkLXRpdGxlJwopLnRleHRDb250ZW50ID0gYFNlbGVjdGVkIHRpdGxlOiAke3RpdGxlRWwudGV4dENvbnRlbnR9YDsKCi8vIFNlbGVjdCBieSBDbGFzcwpjb25zdCBpdGVtRWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnaXRlbScpOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAnc2VsZWN0ZWQtaXRlbXMtY291bnQnCikudGV4dENvbnRlbnQgPSBgTnVtYmVyIG9mIGl0ZW1zIHdpdGggY2xhc3MgJ2l0ZW0nOiAke2l0ZW1FbHMubGVuZ3RofWA7CgovLyBTZWxlY3QgYnkgVGFnCmNvbnN0IGxpRWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ2xpJyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1saS10YWcnCikudGV4dENvbnRlbnQgPSBgRmlyc3QgdGFnIG5hbWU6ICR7bGlFbHNbMF0udGFnTmFtZX1gOwoKLy8gU2VsZWN0IHRoZSBmaXJzdCBpdGVtCmNvbnN0IGZpcnN0SXRlbUVsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLml0ZW0nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWl0ZW0nCikudGV4dENvbnRlbnQgPSBgRmlyc3QgaXRlbSB0ZXh0OiAke2ZpcnN0SXRlbUVsLnRleHRDb250ZW50fWA7CgovLyBTZWxlY3QgYWxsIGl0ZW1zCmNvbnN0IGFsbEl0ZW1zID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLml0ZW0nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2FsbC1pdGVtcy1jb3VudCcKKS50ZXh0Q29udGVudCA9IGBUb3RhbCBpdGVtcyBzZWxlY3RlZCB3aXRoIHF1ZXJ5U2VsZWN0b3JBbGw6ICR7YWxsSXRlbXMubGVuZ3RofWA7

Dieser Kurs bietet eine tiefgehende Erkundung der wichtigsten JavaScript-Prinzipien, mit Schwerpunkt auf Klassen, DOM-Manipulation, Ereignisbehandlung und asynchroner Programmierung. Sie lernen, dynamische und interaktive Elemente zu erstellen, Benutzerinteraktionen zu verwalten und asynchrone Operationen zu handhaben. Durch eine Mischung aus Theorie und praktischen Herausforderungen hilft Ihnen dieser Kurs, praktische JavaScript-Fähigkeiten für reale Anwendungen zu entwickeln.

Lernen Sie die Grundlagen von JavaScript-Klassen, von Klassendeklarationen bis hin zur Definition von Methoden, die die Funktionalität verbessern. Entdecken Sie, wie Sie Parameterobjekte effektiv nutzen, private Eigenschaften verwalten und den Zugriff mit Gettern und Settern steuern. Beherrschen Sie statische Eigenschaften und statische Methoden und entfesseln Sie die Kraft der Klassenvererbung mit "extends" und "super()", um skalierbaren und wiederverwendbaren Code zu erstellen.

Beherrschen Sie die DOM-Manipulation, um dynamische, interaktive Webanwendungen zu erstellen. Navigieren und ändern Sie die Struktur des DOM, aktualisieren Sie Inhalte dynamisch und implementieren Sie Best Practices für Sicherheit und Leistung. Unterscheiden Sie zwischen Eigenschaften und Attributen, um Ihren Code zu optimieren.

Entfesseln Sie die Interaktivität Ihrer Webanwendungen, indem Sie JavaScript-Ereignisse meistern. Verstehen Sie die Ereignisausbreitung, steuern Sie das Ereignisverhalten und implementieren Sie eine effiziente Ereignisbehandlung für Benutzerinteraktionen. Optimieren Sie die Leistung mit fortgeschrittenen Techniken wie der Ereignisdelegation.

Dieser Abschnitt behandelt die Grundlagen von asynchronem JavaScript, einschließlich Callbacks, Promises und async/await. Sie lernen, Daten von APIs abzurufen, Drittanbieter-Bibliotheken zu integrieren und mehrere Anfragen effizient zu bearbeiten, um Fähigkeiten zum Erstellen datengetriebener Anwendungen zu entwickeln.

Fortgeschrittene JavaScript-Meisterschaft

Herausforderung: Abfragen des DOM

Aufgabe