## Tâche
Vous disposez d'une liste de courses dans votre HTML et vous devez sélectionner des éléments spécifiques en utilisant différentes méthodes de requête du DOM.
1. **Sélection par ID** : Sélectionner l’élément `<h1>` avec l’ID `title` ;
2. **Sélection par classe** : Sélectionner tous les éléments avec la classe `item` ;
3. **Sélection par balise** : Sélectionner tous les éléments `<li>` ;
4. **Sélection du premier élément correspondant** : Sélectionner le premier élément `<li>` avec la classe `item` ;
5. **Sélection de tous les éléments correspondants** : Sélectionner tous les éléments `<li>` avec la classe `item`.

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

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdTZWdvZSBVSScsIFRhaG9tYSwgR2VuZXZhLCBWZXJkYW5hLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmNGY2Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGNvbG9yOiAjMzMzOwp9CgojdGl0bGUgewogIGZvbnQtc2l6ZTogMi41cmVtOwogIGNvbG9yOiAjM2E4YmNkOwogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7CiAgbWFyZ2luLWJvdHRvbTogMXJlbTsKICBsZXR0ZXItc3BhY2luZzogMS4ycHg7Cn0KCnVsIHsKICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7CiAgcGFkZGluZzogMDsKICBtYXJnaW46IDAgMCAycmVtIDA7CiAgd2lkdGg6IDMyMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIG92ZXJmbG93OiBoaWRkZW47Cn0KCi5pdGVtIHsKICBwYWRkaW5nOiAxNnB4OwogIGZvbnQtc2l6ZTogMS4xcmVtOwogIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZTBlNGU3OwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCBjb2xvciAwLjNzIGVhc2U7Cn0KCi5pdGVtOmxhc3QtY2hpbGQgewogIGJvcmRlci1ib3R0b206IG5vbmU7Cn0KCi5pdGVtOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZDNlOWY1OwogIGNvbG9yOiAjMjY3ZWJkOwogIGN1cnNvcjogcG9pbnRlcjsKfQoKZGl2IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmZmZmOwogIHBhZGRpbmc6IDE2cHg7CiAgd2lkdGg6IDMyMHB4OwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBib3gtc2hhZG93OiAwIDRweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKICB0ZXh0LWFsaWduOiBsZWZ0Owp9Cgojc2VsZWN0ZWQtdGl0bGUsCiNzZWxlY3RlZC1pdGVtcy1jb3VudCwKI2ZpcnN0LWxpLXRhZywKI2ZpcnN0LWl0ZW0sCiNhbGwtaXRlbXMtY291bnQgewogIGZvbnQtc2l6ZTogMXJlbTsKICBtYXJnaW46IDhweCAwOwp9Cgojc2VsZWN0ZWQtdGl0bGUgewogIGZvbnQtd2VpZ2h0OiBib2xkOwogIGNvbG9yOiAjMjhhNzQ1Owp9Cgojc2VsZWN0ZWQtaXRlbXMtY291bnQgewogIGNvbG9yOiAjMTdhMmI4Owp9CgojZmlyc3QtbGktdGFnIHsKICBjb2xvcjogI2ZmYzEwNzsKfQoKI2ZpcnN0LWl0ZW0gewogIGNvbG9yOiAjZGMzNTQ1Owp9CgojYWxsLWl0ZW1zLWNvdW50IHsKICBjb2xvcjogIzZjNzU3ZDsKfQ==

Ly8gU2VsZWN0IGJ5IElECmNvbnN0IHRpdGxlRWwgPSBkb2N1bWVudC5fX19fXyhfX19fXyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdzZWxlY3RlZC10aXRsZScKKS50ZXh0Q29udGVudCA9IGBTZWxlY3RlZCB0aXRsZTogJHt0aXRsZUVsLnRleHRDb250ZW50fWA7CgovLyBTZWxlY3QgYnkgQ2xhc3MKY29uc3QgaXRlbUVscyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3NlbGVjdGVkLWl0ZW1zLWNvdW50JwopLnRleHRDb250ZW50ID0gYE51bWJlciBvZiBpdGVtcyB3aXRoIGNsYXNzICdpdGVtJzogJHtpdGVtRWxzLmxlbmd0aH1gOwoKLy8gU2VsZWN0IGJ5IFRhZwpjb25zdCBsaUVscyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWxpLXRhZycKKS50ZXh0Q29udGVudCA9IGBGaXJzdCB0YWcgbmFtZTogJHtsaUVsc1swXS50YWdOYW1lfWA7CgovLyBTZWxlY3QgdGhlIGZpcnN0IGl0ZW0KY29uc3QgZmlyc3RJdGVtRWwgPSBkb2N1bWVudC5fX19fXyhfX19fXyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1pdGVtJwopLnRleHRDb250ZW50ID0gYEZpcnN0IGl0ZW0gdGV4dDogJHtmaXJzdEl0ZW1FbC50ZXh0Q29udGVudH1gOwoKLy8gU2VsZWN0IGFsbCBpdGVtcwpjb25zdCBhbGxJdGVtcyA9IGRvY3VtZW50Ll9fX19fKF9fX19fKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2FsbC1pdGVtcy1jb3VudCcKKS50ZXh0Q29udGVudCA9IGBUb3RhbCBpdGVtcyBzZWxlY3RlZCB3aXRoIHF1ZXJ5U2VsZWN0b3JBbGw6ICR7YWxsSXRlbXMubGVuZ3RofWA7

- Utiliser `getElementById` pour sélectionner l’élément `<h1>` avec l’ID `title` ;
- Utiliser `getElementsByClassName` pour sélectionner tous les éléments avec la classe `item` ;
- Utiliser `getElementsByTagName` pour sélectionner tous les éléments `<li>` ;
- Utiliser `querySelector` pour sélectionner le premier élément `<li>` avec la classe `item` ;
- Utiliser `querySelectorAll` pour sélectionner tous les éléments `<li>` avec la classe `item`.

Ly8gU2VsZWN0IGJ5IElECmNvbnN0IHRpdGxlRWwgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGl0bGUnKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ3NlbGVjdGVkLXRpdGxlJwopLnRleHRDb250ZW50ID0gYFNlbGVjdGVkIHRpdGxlOiAke3RpdGxlRWwudGV4dENvbnRlbnR9YDsKCi8vIFNlbGVjdCBieSBDbGFzcwpjb25zdCBpdGVtRWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeUNsYXNzTmFtZSgnaXRlbScpOwpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgKICAnc2VsZWN0ZWQtaXRlbXMtY291bnQnCikudGV4dENvbnRlbnQgPSBgTnVtYmVyIG9mIGl0ZW1zIHdpdGggY2xhc3MgJ2l0ZW0nOiAke2l0ZW1FbHMubGVuZ3RofWA7CgovLyBTZWxlY3QgYnkgVGFnCmNvbnN0IGxpRWxzID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ2xpJyk7CmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKAogICdmaXJzdC1saS10YWcnCikudGV4dENvbnRlbnQgPSBgRmlyc3QgdGFnIG5hbWU6ICR7bGlFbHNbMF0udGFnTmFtZX1gOwoKLy8gU2VsZWN0IHRoZSBmaXJzdCBpdGVtCmNvbnN0IGZpcnN0SXRlbUVsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLml0ZW0nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2ZpcnN0LWl0ZW0nCikudGV4dENvbnRlbnQgPSBgRmlyc3QgaXRlbSB0ZXh0OiAke2ZpcnN0SXRlbUVsLnRleHRDb250ZW50fWA7CgovLyBTZWxlY3QgYWxsIGl0ZW1zCmNvbnN0IGFsbEl0ZW1zID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLml0ZW0nKTsKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoCiAgJ2FsbC1pdGVtcy1jb3VudCcKKS50ZXh0Q29udGVudCA9IGBUb3RhbCBpdGVtcyBzZWxlY3RlZCB3aXRoIHF1ZXJ5U2VsZWN0b3JBbGw6ICR7YWxsSXRlbXMubGVuZ3RofWA7

Maîtrisez les concepts essentiels de JavaScript, notamment les classes, la manipulation du DOM, la gestion des événements et la programmation asynchrone. Acquérez la capacité de créer des applications web dynamiques et interactives en gérant les interactions utilisateur, en récupérant et affichant des données, et en traitant efficacement les opérations asynchrones. Grâce à un équilibre entre théorie, exercices pratiques et exemples concrets, ce cours vous dote des compétences pratiques nécessaires au développement web moderne.

Apprenez les fondamentaux des classes JavaScript, des déclarations de classes à la définition de méthodes qui améliorent la fonctionnalité. Découvrez comment utiliser efficacement les objets de paramètres, gérer les propriétés privées et contrôler l'accès avec les accesseurs et mutateurs. Maîtrisez les propriétés et méthodes statiques et exploitez la puissance de l'héritage de classes à l'aide de "extends" et "super()" pour créer un code évolutif et réutilisable.

Maîtrise de la manipulation du DOM pour créer des applications web dynamiques et interactives. Navigation et modification de la structure du DOM, mise à jour dynamique du contenu, mise en œuvre des meilleures pratiques en matière de sécurité et de performance. Différenciation entre propriétés et attributs pour optimiser le code.

Débloquez l'interactivité de vos applications web en maîtrisant les événements JavaScript. Comprenez la propagation des événements, contrôlez le comportement des événements et mettez en œuvre une gestion efficace des événements pour les interactions utilisateur. Optimisez les performances grâce à des techniques avancées telles que la délégation d'événements.

Approfondissement du JavaScript asynchrone, y compris les callbacks, les Promesses et async/await. Acquisition des compétences pour récupérer des données depuis des API, intégrer des bibliothèques tierces et gérer efficacement plusieurs requêtes, afin de développer des applications orientées données.

Défi : Interroger et Sélectionner des Éléments du DOM

Tâche

Awesome!

Défi : Interroger et Sélectionner des Éléments du DOM

Tâche