Salut comment vas tu?Salut Arthur, très bien et toi?
Pas trop, je suis dans le javascript là, j'attaque le DOM et je suis un peu largué...Ah, effectivement c'est un concept qui peut paraitre un peu compliqué au premier abord, mais en fait c'est assez simple.
Ben je pense que le concept j'ai compris, ce n'est pas vraiment le problème, mais là je doit créer des nouveaux éléments dans le DOM et je ne savais même pas qu'on pouvait faire ça en fait...Hum, tu es sûr d'avoir bien compris le concept? Expliques moi ce que c'est le DOM.
En gros, c'est un moyen pour changer des propriétés d'une page, changer une couleur ou des trucs du genre.Ce que tu dit n'est pas franchement faux, mais c'est extrêmement réducteur, c'est bien plus que ça le DOM. Déjà le mot en lui même DOM tu sais ce que ça signifie?
Ah, je l'avais vu... Je ne me rappelle plus...C'est pour Document Object Model, et ça porte bien son nom. En fait le DOM c'est quelque chose qui est construit par le navigateur. Quand tu lui demandes d'afficher du contenu d'un fichier HTML et de CSS associés, il ne sait pas l'afficher tel quel, il a besoin d'interpréter les fichiers pour les comprendre et au fur et à mesure qu'il les lit, il construit ce DOM, un très gros objet qui contiens tout le contenu de ta page. Et ce très gros objet, tu l'as déjà utilisé si tu as déjà fait du javascript, il s'agit de l'objet "document".
Ah donc c'est ça le DOM?Oui, et c'est un objet très complet qui comporte énormément de propriétés, comme la propriété style qui contiens tous le css associé et à appliquer au document, le contenu à afficher, mais aussi la liste des enfants direct qui eux même possèdent à leur tour de nombreuses propriétés, de style, de contenu et d'autres enfants ainsi de suite jusqu'à arriver à la fin du contenu HTML.
Ok, ok, effectivement ce n'étais pas très clair pour moi.Et ce qu'il y a de pratique avec ce DOM, c'est que c'est ce qui sert à afficher la page sur le navigateur. Mais on peut le manipuler en javascript, que ce soit pour récupérer des éléments précis, modifier leur style, leurs classes, leur contenu, les supprimer, en ajouter et en fait, faire toute ce que l'on veut. Et tout changement de cet objet s'affichera directement sur la page actuelle.
Ah parfait, c'est ce que je veux faire. Mais donc je viens de repenser à un truc, quand on fait un document.getElementById ou document.querySelector en fait on parcours cet objet pour récupérer des éléments qu'il contiens?C'est exactement ça, les méthodes getElement(s)By et querySelector sont des moyens de récupérer des éléments du DOM, pour les manipuler ensuite.
Ok donc pour modifier un élément existant je vois bien, mais pour en créer de nouveaux on fait comment?Il y a deux méthodes très différentes qui permettent d'arriver au même résultat, chacune a ses avantages et inconvénients, on va voir déjà comment implémenter ces deux méthodes, et ensuite je t'expliquerai ces différences pour savoir laquelle choisir selon les cas. J'ai terminé cette partie