Javascript (12) - Document Object Model - DOM [1]

Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons voir l'objet Document ou le DOM. Le DOM ou Document Object Model est une interface qui permet aux langages de programmation de communiquer avec les documents à balises comme le HTML ou le XML. En JavaScript, le DOM est poussé à son maximum et on peut par conséquent réussir des prouesses très remarquables. Prenons le code HTML suivant. Dans la balise body, nous avons intégré une balise image de cette manière, d'où le résultat suivant sur le navigateur. L'objectif maintenant, c'est qu'au moment de survoler cette image, on veut changer sa source dynamiquement avec JavaScript. Et pour ce faire, on a prévu un dossier qui contient 3 images différentes. La première image, c'est celle qu'on a intégrée dans le document, et 2 autres images que l'on va charger au fur et à mesure. On va donc se rendre dans le code et on va ajouter les événements souhaités. Si on survole l'image, on va appeler une fonction qui va charger la source et si on quitte celle-ci, dans ce cas on va restituer l'image par défaut. mouseover égale à la fonction over et onMouseout égale à la fonction out. Maintenant, nous allons créer ces 2 fonctions. Voilà, bon, dans la première fonction, ce qu'on va faire, c'est accéder à l'objet image, c'est-à-dire à la première image, et changer sa source. Pour ce faire, il y a plusieurs méthodes, on va les voir une à une. Donc la première méthode est la suivante, on met document, bon, c'est évident parce qu'on est en train de manipuler l'objet document, bien le DOM. Alors forcément, l'objet principal que l'on va gérer, c'est document. Et comme sous-objet on va mettre images. Dans ce cas images ça retourne tous les objets de type image de mon document HTML. Dans ce cas je dispose d'une seule image alors donc images ça va me retourner un tableau qui contient un seul index, ça veut dire une seule entrée. Autrement dit pour accéder à la première image je dois mettre des crochets comme ça puisque c'est un tableau et je mets l'index 0 pour dire la première image. Si je dispose d'une deuxième balise img et je veux accéder à celle-ci, donc je mets ici la valeur 1, etc. Bon, maintenant que j'ai accédé à cette image, qu'est-ce que je veux changer dans celle-ci? Je veux tout simplement changer la source. Alors l'attribut à mettre, c'est .src comme ça, et comme valeur, je mets une chaîne de caractères où je vais spécifier le chemin de l'image. Donc dans ce cas, l'image que je veux charger, c'est l'image 2.jpg. Donc je mets ici le chemin, c'est images/ image2.jpg. Avec ça déjà, on va essayer de voir le résultat. J'actualise la page. Quand je survole, on constate bel et bien que l'image a changé. Mais quand je quitte, il se passe rien parce que c'est normal, je n'ai encore rien mis dans la fonction out. Dans la fonction out, je fais le même traitement. Donc il suffit de copier ce code, je le colle ici, et ensuite je restitue l'image initiale, à savoir l'image1. Donc quand je survole l'image, j'appelle la fonction hover et je charge l'image 2. Et quand je quitte l'image, alors la fonction out est appelée qui restitue l'image 1. Alors j'exécute. Bon, je survole, c'est l'image 2. Je quitte, c'est l'image 1. Alors on appelle ceci un survol d'image. Bien entendu, on peut réussir un traitement pareil simplement avec du CSS, mais avec JavaScript c'est encore mieux. Maintenant nous allons voir une autre méthode qui permet de spécifier un objet dans un document HTML. Ici, au lieu de mettre document.images, bon, parce qu'on imagine que cet objet permet d'accéder exclusivement aux images de mon document HTML, on peut faire un truc du genre. Bon, tout d'abord, nous allons nous rendre sur la balise img et on mettra un ID, identifiant d'élément, et je l'appellerai monimage. En CSS, nous avons vu que l'identifiant d'un élément est unique, c'est-à-dire qu'on n'a pas le droit de dupliquer ce nom dans le même document plusieurs fois. Maintenant, on va accéder à notre image non pas par l'objet images mais par son identifiant. Alors je mettrai ici document.getElementById et entre les parenthèses, je vais spécifier en tant que chaîne de caractères la valeur de l'ID que j'ai donné à l'image qui est mon image dans ce cas. C'est-à-dire que désormais je peux accéder à mon objet HTML, que ce soit une image ou bien n'importe quel autre type d'objet, via son identifiant de la manière suivante getElementById. Notez bien que le E, le B et le I doivent être mis en majuscule et le reste c'est en minuscule. C'est obligatoire parce que JavaScript est fortement sensible à la casse. Maintenant j'exécute pour voir le résultat. Alors j'actualise, je survole et je quitte et le fonctionnement reste toujours le même. Notez que getElementById permet d'accéder à tous les types d'objets possibles, c'est-à-dire pas uniquement aux images mais aussi aux conteneurs et toutes les autres balises HTML que l'on peut intégrer entre body et /body. Troisième méthode maintenant, on va l'appliquer par exemple sur la fonction out. Maintenant, au lieu d'accéder à l'image par l'objet images ou bien par son ID, je vais maintenant accéder à l'image via sa balise de la manière suivante: document.getElementById. Bon, c'est-à-dire que je vais accéder maintenant à l'objet via son nom de balise et je mets ici img en tant que chaîne de caractères. Notez bien qu'ici il y a un s, c'est-à-dire que document.getElementById tag name, ça va me retourner tous les objets ou bien tous les éléments HTML qui portent le nom img, c'est-à-dire dont le nom de la balise est img. Il est possible d'en avoir plusieurs, alors dans ce cas ça va me retourner un tableau exactement comme le sous-objet images. Alors il faut spécifier quelle image je veux récupérer. Dans ce cas je mets des crochets pour dire la première image c'est 0, deuxième image c'est 1, etc. Bon, maintenant j'exécute. Quand je survole et quand je quitte, on voit bien que le traitement ne change pas, c'est-à-dire que ça marche toujours de la même manière. Il y a juste une chose, c'est que la plupart des intégrateurs préfèrent ne pas mettre des crochets mais plutôt un truc du genre .item et mettre un 0. C'est pratiquement la même chose sauf que donc ça c'est une méthode qui est préférée par les développeurs JavaScript et ça donne le même résultat. Bon, j'exécute. Alors je survole et je quitte et j'ai toujours le même comportement. Alors notez que pour accéder exclusivement aux images, on utilise document.images. Et pour accéder à tous les autres objets HTML, que ce soit des images, des conteneurs ou bien n'importe quel autre type de balise, on a le choix entre getElementById ou bien getElementTagName. Bien sûr, il existe d'autres méthodes que l'on va voir au fur et à mesure qu'on progresse dans le cours. Une autre chose, c'est que imaginez que je veux par exemple modifier la source de l'image. Et bien sûr, les événements, je les ai déclarés au sein de l'image elle-même. Ça veut dire onMouseOver et onMouseOut ici. Bon, lieu de prendre la peine de mettre document.getElementById, etc., parce que c'est une syntaxe qui est relativement longue, je veux passer ici juste le nom de l'objet que je veux changer. Alors là, l'objet c'est quoi? C'est l'objet courant. Alors je mettrai le mot-clé this, je le passe en guise d'argument pour les deux fonctions. C'est-à-dire que quand je survole l'image, j'exécute la fonction hover en lui passant comme argument l'objet courant this, qui est bien sûr document.getElementById mon image dans ce cas, si vous voulez. Et là, je récupère l'objet, bon, je vais l'appeler tout simplement Et je mets ici l'objet, l'objet courant. Même chose ici. Voilà. .src. Et là, ça devrait aussi marcher de la même manière. Alors, j'exécute pour voir le résultat. Et ça donne le même comportement. C'est-à-dire que vous avez vraiment l'embarras du choix afin d'adopter la méthode qui vous arrange le plus. Bien entendu, on peut utiliser une seule fonction au lieu de deux. Parce que là, on a utilisé deux fonctions, over et out. Alors on peut utiliser une sous-fonction que j'appelle par exemple surVol. Voilà, comme ça. Donc, ou bien je l'appelle sur, une sous-fonction. Et là je vais l'appeler donc sur, comme ça. Là encore sur. Mais il me faut maintenant un deuxième argument qui va spécifier le numéro, bien le nom de l'image à charger. Et bon, si vous avez bien fait attention, j'ai renommé mes images de la manière suivante: image1, image 2, image 3. Ça me sera plus facile d'y accéder de cette manière. Sinon, on peut se servir d'un tableau et mettre dedans les sources de mes images. Dans ce cas, au lieu d'utiliser des indices numériques directement sur les noms des images, je les utilise en tant qu'index du tableau qui contient celles-ci. Maintenant, on va faire ceci. On passe un deuxième argument qui est le numéro de l'image souhaitée. Par exemple, quand je survole, je vais charger l'image 2. Et quand je quitte, je vais charger l'image 1. Et là, bon, ça sera le numéro de l'image, donc je vais appeler num. Et ici, je mettrai tout simplement une concaténation et je mets ici la valeur num. Bon, c'est-à-dire que quand je survole l'image, je passe l'argument 2 que je remplace directement, ça me donne image2.jpg. Et quand je quitte, je passe l'argument 1 qui va se comporter de la même manière. Alors maintenant, J'exécute et ça me donne le même résultat. Bon, vous avez vu que le code maintenant est devenu vraiment trop court par rapport à ce qui était avant. Maintenant, nous allons essayer d'appliquer le DOM sur d'autres objets autres que des images. Nous allons effacer cette fonction et à la place de l'image, on mettra par exemple un conteneur div avec ID par exemple que j'appellerai div1, comme ça. Et je mettrai un texte par défaut, par exemple bonjour. Donc ça, c'est le texte qui s'inscrit par défaut. Maintenant j'actualise, bon j'ai un bonjour qui est écrit ici. Bon je peux appliquer un style si je veux, donc sinon je peux conserver les choses telles qu'elles sont. Bon maintenant l'objectif c'est que je voudrais changer l'apparence voire le contenu de cette div avec le JavaScript. Bon je vais prévoir un bouton, par exemple ici input onclick égale par exemple la fonction f. Dans ce cas, la fonction f, je vais la déclarer ici. Et cette fonction, elle va agir sur cette div afin qu'elle change son contenu, c'est-à-dire le texte qu'elle contient, et aussi son apparence, c'est-à-dire la couleur, le design et tout le reste. Bon, c'est-à-dire tous les styles qui sont propres à cet objet. Maintenant, pour accéder à l'objet div1, je mettrai document.getElementById div1. Div1. Voilà, bien sûr on peut aussi mettre document.getElementsByTagName et vous spécifiez l'index, dans ce cas c'est le premier élément. Sinon on peut utiliser d'autres techniques, mais comme j'ai dit, on aura l'occasion de voir des techniques encore plus avancées un peu plus loin. Imaginons que je veux changer le texte qu'il contient, c'est-à-dire au lieu d'avoir bonjour, je vais mettre bonsoir. Alors la propriété à mettre, c'est innerHTML, comme ça, innerHTML avec HTML majuscule, c'est obligatoire. Égal et vous mettez en guise de chaîne de caractères la nouvelle valeur souhaitée, par exemple salut à tous. Bon maintenant quand je vais cliquer sur le bouton, je vais voir que le texte bonjour disparaît, sera remplacé par salut à tous. J'exécute, voilà et ça me donne salut à tous ici. Bon imaginez qu'à la place de div vous avez une input, par exemple input type text, alors la seule chose qui va changer c'est au lieu de mettre innerHTML vous mettez value. Comme on a vu avant. Bon, innerHTML, c'est pratiquement pour tous les objets qui peuvent contenir du texte, sauf les inputs, c'est-à-dire les zones de texte, les zones de mot de passe, les textarea et tout le reste. Vaut mieux mettre value dans ce cas. Bon, ici maintenant je veux changer l'apparence, c'est-à-dire l'allure de ma div, c'est-à-dire du texte qui sera écrit dans la div. Alors je mettrai document.getElementById toujours div1, ou bien document.getElementsByTagName si vous voulez. Bon, maintenant imaginez que je veux colorer le texte en rouge. Pour appliquer le rouge, alors il faut appliquer un style CSS. Et pour dire que c'est un style, je vais mettre la propriété .style. Et bien sûr, quel style je veux changer? Dans ce cas, il faut spécifier la nature du style précisément, qui est color. Donc .style.color. Notez bien que color, c'est rien d'autre que la syntaxe CSS qu'on a vue avant. C'est-à-dire les mêmes syntaxes CSS qu'on a vu, ils seront repris de la même manière à quelques différences près pour les styles composés. Et on va voir des exemples juste après. Donc style.color égale, et ici vous spécifiez la couleur de l'une des 4 manières qu'on a vu, soit avec le nom anglais, ou bien le codage décimal, codage hexadécimal, ou bien le codage RGBA avec la prise en charge de la transparence. Par exemple, je mettrai ici red pour dire rouge. Alors maintenant, j'actualise. Quand je clique, le texte, il change de valeur et de couleur. C'est-à-dire on a agi sur le contenu et aussi sur le style de l'objet. Bon, de la même manière, bon, je vais juste mettre copier comme ça, coller. En plus de la couleur, je veux changer par exemple l'arrière-plan. Alors je vais mettre background color. Voilà, juste une remarque, c'est que ça c'est la syntaxe CSS. En JavaScript, ce qu'il faut faire, c'est que si vous avez un nom composé, ça veut dire un style avec un nom composé, il suffit de retirer le tiret qui est là et capitaliser le caractère immédiatement suivant. Dans ce cas, ça donne background-color, attaché de cette manière, background-color comme ça. Et vous mettez la valeur souhaitée, par exemple on va mettre yellow. Ou bien le code hexadécimal si vous voulez. Maintenant j'exécute et ça me donne le résultat suivant. Alors vous avez vu maintenant qu'on peut changer dynamiquement de style CSS et aussi de contenu HTML de notre objet. Bon, si vous avez beaucoup de styles à changer, vous constatez qu'il y aura une certaine redondance. Ça veut dire qu'on va répéter à chaque fois donc le même code avec juste une petite partie qui va changer. Alors la solution c'est quoi? On va créer une classe et on va essayer d'appliquer d'un seul coup avec du JavaScript. Ici je vais prévoir une classe que j'appellerai par exemple .cl ou bien .cl1 pour dire ma classe. Je mettrai color red, background color yellow, font size par exemple 24 points, letter spacing 10 pixels, etc. Vous mettez autant de styles que vous souhaitez. Maintenant au lieu d'appliquer ces styles un à un, je vais appliquer la classe d'un seul coup via le JavaScript. Alors je vais enlever cette ligne et ici au lieu de changer le style je vais plutôt appliquer une classe à notre objet par la propriété className avec un N majuscule. Donc document.getElementById div1 pour cibler la div souhaitée .className en tant que propriété et comme valeur vous lui donnez en tant que chaîne de caractères le nom de la classe. Cl1, bien sûr sans le point, parce que c'est une classe que vous allez appliquer comme si vous le faites en HTML. Dans ce cas, quand j'exécute, on va voir que tous les styles qui sont dédiés au cl1 vont être appliqués à notre objet div1. J'actualise. Maintenant je clique et voilà, donc tous les styles sont appliqués d'un seul coup. Et là, la syntaxe est devenue moins longue. Alors ça aussi, c'est une solution à envisager. Sinon, on peut faire ça autrement. Bon, parce que généralement, la classe, c'est quoi? C'est un attribut que l'on va appliquer à la div. C'est-à-dire, c'est comme si vous faites la chose suivante: class égale CL1. Donc ça, c'est, on le fait statiquement avec le HTML, mais on peut le faire dynamiquement via JavaScript en changeant, bien, en agissant sur l'attribut. Alors j'enlève className et je mets setAttribute. Donc setAttribute, c'est une méthode avec un A majuscule qui contient 2 valeurs. La première valeur, c'est le nom de l'attribut, c'est-à-dire l'attribut lui-même, qui dans ce cas class en tant que chaîne de caractères. Et le deuxième argument, c'est la valeur à appliquer à cet attribut. Alors dans ce cas, c'est cl1. Bon, c'est comme si vous avez appliqué un attribut class avec la valeur cl1 ici sur l'objet. Maintenant, j'exécute pour voir le résultat et ça donne la même chose. Voilà, donc j'espère que vous avez compris maintenant comment appréhender le DOM en JavaScript. Et comme j'ai dit tout à l'heure, il y a d'autres méthodes qui permettent d'accéder au DOM comme les querySelector ou bien les events. Ce sont des techniques que l'on va voir un peu plus loin. Merci pour votre attention et à la vidéo prochaine.