CATALOGUE Code & Data Formation Ajax/jQuery Apprendre Ajax / JQuery

Manipulation des Élèments DOM avec JavaScript

Retour à la formation
Chapitre 11 Leçon 2
Précédent
Suivant

Découvrez comment utiliser des fonctions de recherche pour manipuler les éléments DOM en JavaScript.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous nous concentrerons sur l'utilisation des fonctions de recherche pour manipuler les éléments du DOM. Nous verrons comment cibler les éléments adjacents, comme les frères suivants ou précédents, et comment appliquer des styles CSS spécifiques. Un exemple d'application consistera à trouver tous les éléments suivant un tag <h2> et à leur appliquer une couleur. Nous apprendrons aussi à cibler les éléments précédant une table et à leur appliquer des modifications. Une autre section couvrira la mise en place de gestionnaires d'événements pour animer des éléments en cliquant dessus, et nous terminerons par la recherche des plus proches parents d'un élément avec la fonction closest.

Objectifs de cette leçon

Les objectifs de cette vidéo sont les suivants :
1. Comprendre l'utilisation des fonctions de recherche pour cibler et modifier les éléments DOM.
2. Appliquer des styles CSS en ciblant les éléments adjacents.
3. Mettre en place des gestionnaires d'événements pour animer des éléments DOM.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML, CSS, et JavaScript.

Métiers concernés

Les compétences acquises dans cette leçon sont applicables pour plusieurs métiers tels que :
1. Développeur Front-end
2. Intégrateur Web
3. Développeur Full Stack

Alternatives et ressources

En plus de JavaScript, des bibliothèques comme jQuery peuvent être utilisées pour la manipulation du DOM de manière plus simplifiée.

Questions & Réponses

La fonction closest permet de trouver le plus proche parent d'un élément spécifique.
On peut cibler tous les éléments précédant un élément de type table à l'aide de la méthode prevAll.
L'effet slideToggle est appliqué aux paragraphes suivants lorsque l'on clique sur un élément H2.