## Aufgabe
In Ihrem HTML befindet sich eine Einkaufsliste, und Sie sollen bestimmte Elemente mit verschiedenen DOM-Abfragemethoden auswählen.
1. **Nach ID auswählen**: Das `<h1>`-Element mit der ID `title` auswählen;
2. **Nach Klasse auswählen**: Alle Elemente mit der Klasse `item` auswählen;
3. **Nach Tag auswählen**: Alle `<li>`-Elemente auswählen;
4. **Erstes passendes Element auswählen**: Das erste `<li>`-Element mit der Klasse `item` auswählen;
5. **Alle passenden Elemente auswählen**: Alle `<li>`-Elemente mit der Klasse `item` auswählen.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdTZWdvZSBVSScsIFRhaG9tYSwgR2VuZXZhLCBWZXJkYW5hLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY2Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGNvbG9yOiAjMzMzOwp9CgojdGl0bGUgewogIGZvbnQtc2l6ZTogMi41cmVtOwogIGNvbG9yOiAjM2E4YmNkOwogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7CiAgbWFyZ2luLWJvdHRvbTogMXJlbTsKICBsZXR0ZXItc3BhY2luZzogMS4ycHg7Cn0KCnVsIHsKICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICBtYXJnaW46IDAgMCAycmVtIDA7CiAgd2lkdGg6IDMyMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIG92ZXJmbG93OiBoaWRkZW47Cn0KCi5pdGVtIHsKICBwYWRkaW5nOiAxNnB4OwogIGZvbnQtc2l6ZTogMS4xcmVtOwogIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZTBlNGU3OwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCBjb2xvciAwLjNzIGVhc2U7Cn0KCi5pdGVtOmxhc3QtY2hpbGQgewogIGJvcmRlci1ib3R0b206IG5vbmU7Cn0KCi5pdGVtOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDNlOWY1OwogIGNvbG9yOiAjMjY3ZWJkOwogIGN1cnNvcjogcG9pbnRlcjsKfQoKZGl2IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIHBhZGRpbmc6IDE2cHg7CiAgd2lkdGg6IDMyMHB4OwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBib3gtc2hhZG93OiAwIDRweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKICB0ZXh0LWFsaWduOiBsZWZ0Owp9Cgojc2VsZWN0ZWQtdGl0bGUsCiNzZWxlY3RlZC1pdGVtcy1jb3VudCwKI2ZpcnN0LWxpLXRhZywKI2ZpcnN0LWl0ZW0sCiNhbGwtaXRlbXMtY291bnQgewogIGZvbnQtc2l6ZTogMXJlbTsKICBtYXJnaW46IDhweCAwOwp9Cgojc2VsZWN0ZWQtdGl0bGUgewogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAjMjhhNzQ1Owp9Cgojc2VsZWN0ZWQtaXRlbXMtY291bnQgewogIGNvbG9yOiAjMTdhMmI4Owp9CgojZmlyc3QtbGktdGFnIHsKICBjb2xvcjogI2ZmYzEwNzsKfQoKI2ZpcnN0LWl0ZW0gewogIGNvbG9yOiAjZGMzNTQ1Owp9CgojYWxsLWl0ZW1zLWNvdW50IHsKICBjb2xvcjogIzZjNzU3ZDsKfQ==

Ly8gU2VsZWN0IGJ5IElECmNvbnN0IHRpdGxlRWwgPSBkb2N1bWVudC5fX19fXyhfX19fXyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdzZWxlY3RlZC10aXRsZScKKS50ZXh0Q29udGVudCA9IGBTZWxlY3RlZCB0aXRsZTogJHt0aXRsZUVsLnRleHRDb250ZW50fWA7CgovLyBTZWxlY3QgYnkgQ2xhc3MKY29uc3QgaXRlbUVscyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3NlbGVjdGVkLWl0ZW1zLWNvdW50JwopLnRleHRDb250ZW50ID0gYE51bWJlciBvZiBpdGVtcyB3aXRoIGNsYXNzICdpdGVtJzogJHtpdGVtRWxzLmxlbmd0aH1gOwoKLy8gU2VsZWN0IGJ5IFRhZwpjb25zdCBsaUVscyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWxpLXRhZycKKS50ZXh0Q29udGVudCA9IGBGaXJzdCB0YWcgbmFtZTogJHtsaUVsc1swXS50YWdOYW1lfWA7CgovLyBTZWxlY3QgdGhlIGZpcnN0IGl0ZW0KY29uc3QgZmlyc3RJdGVtRWwgPSBkb2N1bWVudC5fX19fXyhfX19fXyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1pdGVtJwopLnRleHRDb250ZW50ID0gYEZpcnN0IGl0ZW0gdGV4dDogJHtmaXJzdEl0ZW1FbC50ZXh0Q29udGVudH1gOwoKLy8gU2VsZWN0IGFsbCBpdGVtcwpjb25zdCBhbGxJdGVtcyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2FsbC1pdGVtcy1jb3VudCcKKS50ZXh0Q29udGVudCA9IGBUb3RhbCBpdGVtcyBzZWxlY3RlZCB3aXRoIHF1ZXJ5U2VsZWN0b3JBbGw6ICR7YWxsSXRlbXMubGVuZ3RofWA7

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

Ly8gU2VsZWN0IGJ5IElECmNvbnN0IHRpdGxlRWwgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGl0bGUnKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3NlbGVjdGVkLXRpdGxlJwopLnRleHRDb250ZW50ID0gYFNlbGVjdGVkIHRpdGxlOiAke3RpdGxlRWwudGV4dENvbnRlbnR9YDsKCi8vIFNlbGVjdCBieSBDbGFzcwpjb25zdCBpdGVtRWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnaXRlbScpOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAnc2VsZWN0ZWQtaXRlbXMtY291bnQnCikudGV4dENvbnRlbnQgPSBgTnVtYmVyIG9mIGl0ZW1zIHdpdGggY2xhc3MgJ2l0ZW0nOiAke2l0ZW1FbHMubGVuZ3RofWA7CgovLyBTZWxlY3QgYnkgVGFnCmNvbnN0IGxpRWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ2xpJyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1saS10YWcnCikudGV4dENvbnRlbnQgPSBgRmlyc3QgdGFnIG5hbWU6ICR7bGlFbHNbMF0udGFnTmFtZX1gOwoKLy8gU2VsZWN0IHRoZSBmaXJzdCBpdGVtCmNvbnN0IGZpcnN0SXRlbUVsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLml0ZW0nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWl0ZW0nCikudGV4dENvbnRlbnQgPSBgRmlyc3QgaXRlbSB0ZXh0OiAke2ZpcnN0SXRlbUVsLnRleHRDb250ZW50fWA7CgovLyBTZWxlY3QgYWxsIGl0ZW1zCmNvbnN0IGFsbEl0ZW1zID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLml0ZW0nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2FsbC1pdGVtcy1jb3VudCcKKS50ZXh0Q29udGVudCA9IGBUb3RhbCBpdGVtcyBzZWxlY3RlZCB3aXRoIHF1ZXJ5U2VsZWN0b3JBbGw6ICR7YWxsSXRlbXMubGVuZ3RofWA7

Beherrschen Sie grundlegende JavaScript-Konzepte, einschließlich Klassen, DOM-Manipulation, Ereignisbehandlung und asynchroner Programmierung. Erlernen Sie die Erstellung dynamischer und interaktiver Webanwendungen durch Verwaltung von Benutzerinteraktionen, das Abrufen und Anzeigen von Daten sowie die effiziente Handhabung asynchroner Operationen. Dieser Kurs vermittelt Ihnen durch eine Kombination aus Theorie, praxisnahen Herausforderungen und realen Beispielen die praktischen Fähigkeiten, die für die moderne Webentwicklung erforderlich sind.

Erlernen der Grundlagen von JavaScript-Klassen, von Klassendeklarationen bis zur Definition von Methoden zur Erweiterung der Funktionalität.
Entdeckung des effektiven Einsatzes von Parameterobjekten, Verwaltung privater Eigenschaften und Steuerung des Zugriffs mit Gettern und Setzern.
Beherrschung statischer Eigenschaften und statischer Methoden sowie Nutzung der Leistungsfähigkeit der Klassenvererbung mit "extends" und "super()" zur Entwicklung skalierbarer und wiederverwendbarer Codes.

Beherrschen Sie die DOM-Manipulation zur Erstellung dynamischer, interaktiver Webanwendungen. Navigieren und verändern Sie die Struktur des DOM, aktualisieren Sie Inhalte dynamisch und setzen Sie Best Practices für Sicherheit und Performance um. Unterscheiden Sie zwischen Eigenschaften und Attributen, um Ihren Code zu optimieren.

Erschließen Sie die Interaktivität Ihrer Webanwendungen durch das Beherrschen von JavaScript-Ereignissen. Verstehen Sie die Ereignisweiterleitung, steuern Sie das Ereignisverhalten und implementieren Sie effiziente Ereignisbehandlung für Benutzerinteraktionen. Optimieren Sie die Leistung mit fortgeschrittenen Techniken wie der Ereignisdelegation.

Vertiefung in asynchrones JavaScript, einschließlich Callbacks, Promises und async/await. Vermittlung von Methoden zum Abrufen von Daten aus APIs, zur Integration von Drittanbieter-Bibliotheken und zum effizienten Umgang mit mehreren Anfragen, um Kompetenzen für die Entwicklung datengetriebener Anwendungen zu erwerben.

Herausforderung: DOM-Elemente Abfragen und Auswählen

Aufgabe

Awesome!

Herausforderung: DOM-Elemente Abfragen und Auswählen

Aufgabe