In this French‑language tutorial, the instructor walks through practical DOM manipulation using vanilla JavaScript. After a brief recap of accessing and styling existing elements, the lesson focuses on dynamically creating, inserting, and deleting nodes. The speaker explains the DOM tree structure, distinguishes element nodes from text nodes, and demonstrates how to use document.createElement to generate <div> elements, assign them a CSS class via .className, and attach them to a parent container with appendChild. He then shows how to create text nodes with document.createTextNode, compare this approach to innerHTML, and append the text to the newly created element. The tutorial proceeds to illustrate inserting elements before existing nodes using insertBefore together with getElementsByTagName, and how to automate the creation of multiple elements recursively with a counter variable and setTimeout. Finally, the instructor demonstrates removing a node from the DOM by targeting its parent (document.body) and calling removeChild on the identified element. Throughout, live code examples are executed in the browser to visualize each step, reinforcing the concepts of dynamic DOM updates.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui, nous allons enchaîner sur le DOM. Dans la vidéo précédente, nous avons vu comment accéder aux éléments HTML existants et comment modifier leur contenu et leur style. Aujourd'hui, nous allons voir carrément comment créer des nouveaux éléments ou comment les supprimer au sein d'un document HTML. Tout d'abord, sachez qu'un document HTML est structuré sous forme d'un arbre. Cet arbre contient des nœuds. Les nœuds sont rien d'autre que les éléments que le document contient, à savoir toutes les balises qui sont incluses dedans, comme la balise <body>, les balises d'images, les conteneurs, etc. On distingue généralement 2 types de nœuds: il y a des nœuds éléments, c'est-à-dire les balises elles-mêmes, et il y a des nœuds texte qui sont les textes que l'on peut voir au sein du navigateur. Considérons le code suivant. Dans la balise body, nous avons intégré un bouton qui va actionner le JavaScript à l'aide d'une fonction qui s'appelle f. Nous avons aussi créé une div identifiée par parent et nous avons mis quelques styles CSS, un style qui concerne la div, c'est-à-dire le conteneur, et une classe qui s'appelle ma-classe que nous n'avons pas encore exploitée. L'objectif, c'est que quand je clique sur le bouton, je veux créer des divs au sein de la balise parent et qui s'attribueront la classe que j'ai créée. À titre d'exemple, quand j'exécute le code tel qu'il est sur le navigateur, je vais avoir le résultat suivant. J'ai le bouton qui actionne le JavaScript et j'ai le conteneur identifié par parent. Maintenant, l'objectif c'est de créer dynamiquement des balises div, c'est-à-dire que je vais avoir quelque chose qui ressemble à ça. Donc div class ma-classe /div. Donc quand j'exécute, je vais avoir la div qui s'ajoute. Et de la même manière, je peux ajouter autant de div que je souhaite, mais pas statiquement comme je viens de le faire, mais dynamiquement via le JavaScript. Autrement dit, l'objectif, ça va ressembler à ceci. Alors maintenant, comment faire? Tout d'abord, dans la fonction f, nous allons créer un nouvel élément que l'on va intégrer au DOM, c'est-à-dire un nouveau nœud. Bon, on va l'appeler elem et on va mettre document.createElement createElement est une méthode qui spécifie le type d'élément à créer. Dans ce cas, je veux créer un élément qui s'appelle div, autrement dit la balise div. Désormais, je dispose de la balise div dont le nom est lm, c'est-à-dire le nom de l'objet lui-même c'est lm. Ce que je vais faire maintenant, c'est attribuer à cet objet la classe, ma classe que j'ai créée. lm.className égale ma-classe. Bon, maintenant je dispose d'une div avec la classe ma-classe, mais cette div n'est pas encore intégrée au DOM. Pour l'intégrer, il faut cibler le parent. Le parent dans ce cas, ce n'est rien d'autre que la balise div identifiée par parent. Alors je vais ajouter le code suivant document.getElementById parent.appendChild. La méthode appendChild permet d'ajouter un enfant ou bien un nœud à l'élément qui a été ciblé ici grâce à l'objet. Dans ce cas, c'est la balise parent et le nœud que je veux ajouter, ce n'est rien d'autre que l'élément que j'ai créé, à savoir lm. Bon, avec ces 3 lignes maintenant, quand j'exécute la page, je vais créer une balise div qui s'appelle lm, je vais lui attribuer une classe qui est déjà créée qui s'appelle ma-classe et ensuite je vais ajouter cet élément à la balise identifiée par parent. Exécutons pour voir le résultat. Quand je clique, donc la première div est créée, la deuxième, la troisième. Bon, ça veut dire que je clique et il y aura autant de divs que je souhaite. Voilà, donc maintenant nous avons vu comment créer un élément, ça veut dire un nœud de type élément, autrement dit la balise div dans ce cas. Mais imaginez que l'on veut mettre un texte dans cette div. Dans ce cas, ce que je vais faire, c'est créer un élément de type texte. Alors il suffit d'ajouter le code suivant. Bon, je peux l'ajouter n'importe où, mais je préfère le mettre à avant l'intégration de l'élément au DOM. Je mets par exemple text comme ça, donc là c'est le nom de l'objet, égal document.createTextNode. Alors la méthode createTextNode permet de créer un nœud texte. Bien entendu, on peut toujours inclure notre texte grâce à l'attribut innerHTML, mais createTextNode c'est encore mieux. Alors on mettra ici le texte souhaité, par exemple bonjour. Alors là je viens de créer un texte, mais ce texte n'apparaîtra nulle part parce qu'il faut l'associer à son parent grâce à la méthode appendChild que je vais appliquer maintenant sur l'élément que j'ai créé comme ça. Donc lm.appendChild et je mets ici texte. Bon, maintenant exécutons pour voir le résultat. Donc à chaque fois j'ai le texte qui est inclus au sein de la balise créée dynamiquement par JavaScript. Imaginons maintenant que je veux créer ces divs d'une manière automatique à l'aide d'une fonction récursive. Je vais par exemple créer une variable i que je vais initialiser à 0 et ensuite, bon ici la valeur à mettre ce n'est pas bonjour mais c'est la valeur de i que je changerai au fur et à mesure. Et là je mettrai par exemple l'incrémentation de i, je vérifie une condition donc si i est inférieur à 20. Je vais rappeler la fonction f à l'aide de setTimeout. Par exemple, la durée c'est 100 millisecondes, comme ça. Voilà, donc maintenant j'exécute. Et quand je clique, bon, je vois bien qu'il y a 20 divs qui ont été créés d'une manière automatique. Bon, la première valeur c'est 0, la dernière c'est 19. Bon, si vous voulez afficher de 1 jusqu'à 20, il suffit de mettre i+ 1 ici. Et vous aurez le résultat suivant. La méthode appendChild permet d'ajouter un élément à la fin. C'est-à-dire, imaginez que vous avez un objet et vous voulez insérer l'élément nouvellement ajouté avant cet objet-là. Par exemple, au sein de la div, je vais inclure une image. On va mettre ici img, par exemple image1.jpg. On exécute. Bon, maintenant l'image est insérée ici. Je veux maintenant insérer mes div nouvellement créés avant l'image que j'ai intégrée. Alors ce que je vais faire, au lieu de mettre appendChild, je vais appeler la méthode insertBefore. La méthode insertBefore permet d'insérer un élément avant un autre. Dans ce cas, insertBefore contient 2 arguments. Le premier argument, c'est l'élément à insérer, à savoir lm. Le deuxième argument, c'est l'élément avant lequel je vais insérer l'objet nouvellement créé. Dans ce cas, c'est l'image. Alors il faut cibler l'image grâce à, par exemple, document.getElementsByTagName img. Bon, il faut cibler la première grâce à item 0. Voilà, comme ça. Donc parce que je n'ai qu'une seule image dans le document. Bon, maintenant j'exécute pour voir le résultat. Et voilà, donc maintenant mes divs sont créées avant l'image. Autrement dit, pour inclure des objets dynamiquement, vous avez le choix entre insertBefore ou bien appendChild. Mais on peut aussi supprimer un élément déjà créé. Par exemple, je vais éliminer ce code. L'objectif, c'est de supprimer carrément le parent, c'est-à-dire le parent qui est là. Je veux le supprimer à l'aide du JavaScript d'une manière dynamique, c'est-à-dire je vais le retirer du DOM. C'est un nœud que je vais supprimer. Pour supprimer un élément, il faut cibler tout d'abord son parent. Dans ce cas, le parent de la div, c'est le body lui-même. Donc le body, je vais le cibler comme ça, donc document.body. Donc là, c'est l'élément body, voilà, point, et j'appelle la méthode removeChild. À removeChild, je vais tout simplement passer l'objet qui est parent grâce à document.getElementById. Parent. Bon, maintenant quand je clique sur le bouton, ce parent ça veut dire la div va disparaître. J'exécute et quand je clique ça disparaît. Ça veut dire qu'elle a été retirée carrément du flux HTML. Autrement dit, le nœud représenté par la div identifiée par parent n'existe plus. On se contente de ça pour cette séance. Merci pour votre attention et à la vidéo prochaine.
