L'essentiel de JavaScript

Modifier les éléments du DOM

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Maintenant que vous savez accéder aux éléments du DOM, voyez comment modifier ces éléments grâce aux fonctions de JavaScript.

Transcription

Dans la vidéo précédente, nous avons réussi à accéder à certains éléments du DOM et à lire certaines de leurs propriétés, nous avons même utilisé ces propriétés pour inscrire des messages dans la console. Alors, lire des propriétés, c'est bien. Mais nous sommes probablement beaucoup plus intéressés par le fait de pouvoir changer, ou ajouter, des propriétés. Alors, l'une des manières les plus faciles de faire cela, c'est d'agir sur les attributs de l'HTML, mais, vous allez de voir, de manière programmatique, en JavaScript. Alors, je suis, ici, sur une page, il n'y a rien de particulièrement intéressant par rapport à cette page, j'avais juste besoin de matériel pour faire ma démonstration, je vais vous montrer tout de suite le code HTML de cette page, rien de bien transcendant non plus, ceci ne devrait plus avoir de secrets pour vous, maintenant, et, vous faire remarquer, à la fin de ce code, ici, que j'ai une balise « script » qui charge le fichier « script.js », qui se trouve ici, qui contient déjà du code, mais ce code est entièrement commenté, donc n'a aucune influence, actuellement, sur la manière dont le navigateur affiche cette page. Elle s'affiche de manière tout à fait normale, ici, dans le navigateur. Alors, je vais revenir sur ce code JavaScript et dé-commenter la première ligne sur code, sans surprises, la première ligne du code utilise « getElementById » pour aller rechercher un élément dans le DOM. Pourquoi sans surprises ? Je vous ai expliqué dans la vidéo précédente que toutes ces procédures, finalement, vont toujours commencer par le fait d'aller rechercher, dans le DOM, le ou les éléments que je désire manipuler. Ici, l’élément que je désire manipuler, c'est celui qui possède l'ID « mainContent », alors je vais aller le repérer dans le code HTML, il s'agit, en fait, d'une balise « div », qui se trouve ici, remarquez, au passage, comment Brackets m'indique la balise de fermeture correspondante, ici, avec les couleurs et c'est donc très facile, pour moi de repérer cet élément, qui est l'élément « mainContent » auquel je m’adresse dans le navigateur, il s'agit de ce gros texte, qui se trouve ici, en tête de page. Alors je retourne dans mon JavaScript, voilà, vous voyez que je stocke cet élément dans une variable que j'appelle « mainContent », je vais maintenant dé-commenter la seconde ligne de mon code, et, vous allez voir que c'est très facile à comprendre, donc j'appelle la méthode « setAttribute » sur cet élément « mainContent », donc, pour modifier un attribut de l'HTML, et cette méthode, cet « attribute » prend deux paramètres, le premier c'est le nom de l'attribut que je désire modifier ou créer et, le deuxième paramètre, c'est la valeur que je désire donner à cet attribut, donc, ici je vais modifier l'attribut « align » et rendre cet attribut égal à « right ». Pour le moment, dans l'HTML, ce « div » « mainContent », n'a pas d'attribut « align ». S'il en avait un, imaginez qu'il y a écrit, ici, « align= left », par exemple, eh bien, « setAttribute » aura pour effet de modifier la valeur de l'attribut « align » existant. Dans ce cas-ci, par contre, eh bien cet attribut « align » n'existe pas sur l'élément de l'HTML, et donc cet « attribute » va simplement le créer. Alors, on va aller voir ce que cela donne dans le navigateur, je rafraîchis ma page, et voyez que cela fonctionne, ce texte est maintenant aligné à droite, j'ai donc ajouté, de manière programmatique, un attribut à mon élément. Alors, si je vais voir ce que cela donne dans la console, je vais faire clic droit sur cet élément et cliquer sur Inspecter, ce qui a pour effet, directement, d'ouvrir ma console en ayant sélectionné l'élément sur lequel j'ai fais le clic droit, eh bien, regardez ce « div ». J'ai un attribut « align=right » qui était ajouté de manière programmatique en JavaScript, cet attribut, rappelez-vous, ne fait pas partie du code HTML, mais, grâce à cette méthode, cet « attribute », je l'ai maintenant ajouté dynamiquement en JavaScript, et donc le texte s'inscrit à droite. Alors, autre chose que je peux faire, je vais dé-commenter maintenant la ligne suivante de mon code, cette ligne va rechercher un élément dans le DOM, mais, cette-fois-ci, c'est l'élément qui porte l'identifiant « mainTitle ». Alors, qu'est-ce que cet élément ? Il s'agit, un petit peu plus haut, d'une balise « a » qui a l'identifiant « mainTitle », une balise « a », quand je vais voir au niveau de ma page ici, c'est en fait le grand cadre « Explore California ». Alors, remarquez que cette balise « a », elle contient du texte : « Venez explorer la Californie ! » et je vais essayer d'aller modifier ce texte en JavaScript. Je vais retourner, ici, au niveau de mon script, je vais dé-commenter, maintenant la ligne suivante, qui est simplement un « console.log » de la propriété « inner HTML » de cet élément « mainTitle ». Alors, je vais sauvegarder, revenir dans mon navigateur, rafraîchir et dans la console vous voyez que j'ai le texte, ici, qui apparaît : « Venez explorer la Californie !» Alors, remarquez que ce texte, je ne le vois pas sur la page, parce qu'en CSS, ce texte a été remplacé, ici, par une image de fond, pour cet élément. Maintenant, je vais vous montrer comment je peux, éventuellement modifier ce texte en utilisant la propriété « inner HTML ». Donc, je vais rajouter, ici, une ligne de code, et je vais faire : « mainTitle.innerHTML », et je vais rendre ceci égal à un autre texte, comme ceci, et donc, quand je sauvegarde ma page, que je reviens dans mon navigateur, vous voyez dans la console que c'est maintenant un autre texte qui apparaît, puis, si je fais clic droit, Inspecter, ici, vous voyez également dans le code HTML que le contenu de cette balise a été remplacé, même s'il ne se voit pas sur la page à cause des styles CSS qui remplacent ce texte par une image, vous voyez que j'ai bel et bien pu changer le contenu, ici, d'un nœud de mon DOM, grâce à cet « innerHTML ». Alors, c'est assez facile de faire cela avec « innerHTML », et ce sera faisable uniquement quand j'ai des petits bouts de texte à changer, parce que regardez ce qu'il va se passer avec l'élément suivant. C'est l'élément qui porte l'identifiant « sidebar ». Je vais aller voir dans mon HTML ce que cela représente, il est dans le fond, C'est un « div » également, voyez qu'il commence en ligne 33 et qu'il se termine en ligne 50, et lui, il contient plein de choses. Des « sous-div », des H1, des H2, des P, etc., et donc, quand je reviens dans mon JavaScript et que je veux faire un « console.log » de l'« inner HTML » de cet élément-là, pour cela, je vais re-commenter le « console.log » précédent, quand je reviens dans mon navigateur, je rafraîchis ma page et je retourne dans ma console, et vous voyez qu'« inner HTML », c'est tout ce code qui se trouve inséré dans l'HTML, entre la balise « div » qui s'ouvre et la balise « div » qui se ferme. Alors, c'est évidemment beaucoup plus difficile à modifier et à manipuler, avec la propriété « innerHTML », vous allez voir plus loin dans le cours que nous aurons d'autres méthodes pour accéder à ces éléments et pour, éventuellement, modifier le contenu de ce « div ». « innerHTML » ne sera pas la méthode la plus adéquate pour faire cela. Alors, je vais retourner dans mon JavaScript pour vous montrer que je vais créer, maintenant, une nouvelle variable qui s'appelle « arrayOfH1s », et qui utilise la méthode « getElementsByTagName », rappelez-vous que c'est au pluriel, parce que je peux aller rechercher plusieurs éléments, et je vais rechercher tous les H1 qui se trouvent dans le « div » « mainContent », rappelez-vous que « mainContent », c'est cet élément que je crée ici, en ligne 1. Alors, dans l'HTML, je vais aller revoir « mainContent », j'ai ici un élément H1 qui se trouve dans ce « div » « mainContent ». Alors je vais retourner, ici, pour faire rapidement un « console.log » de cette variable « arrayOfH1s», voilà. Je vais en profiter pour commenter le « console.log » précédent, revenir dans mon navigateur, faire un « refresh », et vous voyez que j'obtiens une « array », avec un seul élément dedans, un élément qui est un élément H1 et qui se trouve à l'index 0 de cette « array ». Alors, regardez, quand je passe ma souris dans la console, il s'allume. Dans la partie supérieure de l'écran, on voit bien qu'il s'agit du titre principal de la page, ici. Alors, je vais revenir dans mon JavaScript et commenter, ici, le « console.log » et vous montrer comment je peux visualiser ces changements, donc, ici, je vais accéder à l'index 0 de cette « array », donc au premier H1, au seul H1, d'ailleurs de cette « array », et je vais modifier sa propriété « innerHTML » avec cette chaîne de caractères, voici un nouveau titre, et maintenant, si je reviens dans mon navigateur et que je rafraîchis ma page, vous voyez que ça a fonctionné, je vois bien que je peux modifier, comme cela, à la volée, le contenu de certains nœuds du DOM. Alors, vous voyez, ici, par ces quelques exemples, comment je peux modifier, des éléments du DOM, comment je peux ajouter ou modifier des attributs de l'HTML, ajouter ou modifier aussi des éléments, modifier l'« inner HTML », donc le contenu des éléments que je sélectionne, vous voyez, également, que toutes ces procédures commencent toujours soit par un « getElementById », soit par un « getElementsByTagName », c'est-à-dire par le fait d'aller rechercher dans le DOM, l'élément que je désire manipuler.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 avr. 2016
Durée :5h09 (47 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !