Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de JavaScript

Accéder aux éléments du DOM

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à utiliser JavaScript pour accéder aux différents éléments du DOM. Il s'agit aussi de les stocker dans des variables afin de pouvoir travailler avec ces éléments par la suite.

Transcription

Avant de pouvoir manipuler des éléments du DOM, on doit pouvoir choisir le ou les éléments que l'on désire manipuler. Quasiment toutes les procédures commencent toujours par repérer dans le DOM, le ou les éléments que l'on veut manipuler. Alors, il existe plusieurs techniques pour repérer ces éléments et la question centrale à se poser, quand on désire accéder aux éléments du DOM, c'est de savoir si l'élément que l'on recherche est unique, ou pas. Autrement dit, si cet élément est équipé d'une ID dans l'HTML, ou pas. Alors, je suis, ici, sur une page qui est un peu plus sophistiquée que la page avec laquelle on a l'habitude de travailler, je vais me rendre directement dans Brackets pour vous montrer le code HTML de cette page, vous faire remarquer que, à la fin de ce code HTML, eh bien, j'ai une balise « script », ici, qui charge le fichier « script.js », fichier qui, pour le moment, est complètement vide. Puis, quand je reviens sur mon code HTML, vous allez remarquer qu'énormément d'éléments, dans ce code HTML sont équipés de cet attribut ID, donc sont uniques, c'est le cas, notamment, de ce lien, ici, cette balise « a », qui a pour identifiant « mainTitle ». Alors, si je veux aller repérer cet élément grâce au DOM, dans mon fichier JavaScript, je vais écrire une méthode qui est probablement la plus utilisée de tout le DOM c'est la méthode « document.getElementById », remarquez, ici, la « case » un petit peu particulière, un grand E, à « Element », un grand B à « By » et un grand I à « Id ». Et puis, je passe à cette méthode, le nom de l'élément que je désire manipuler « mainTitle », alors, attention à la « case », ici, il faudra bien respecter les majuscules et les minuscules, donc « mainTitle », avec un grand T, exactement comme c'est écrit, ici, dans le code HTML. Je ne vais pas me contenter de faire ceci, je vais aller stocker le résultat de cette fonction « getElementById » dans une variable, donc je vais créer, ici, une variable, que je vais appeler « mainTitle », ce n'est pas obligé, évidemment, que le nom de la variable soit égal au nom de l'ID, c'est simplement parce qu'ici cela a du sens, et puis, pour vous montrer ce que j'obtiens, je vais faire un « console.log » de la variable « mainTitle », comme ceci, et puis, je vais me rendre sur ma page web, Afficher mes outils de développement, voilà et rafraîchir cette page web, vous allez remarquer, au niveau de la console, que j'ai véritablement accès à cette balise « a », cet élément, et même si, dans Chrome, je passe ma souris sur cet élément, voyez qu'il s'allume dans la partie supérieure de la page. Alors, il est important de comprendre, ici, que je n'ai pas accès à une copie de cet élément qui serait détaché du DOM. Non, j'ai véritablement un pointeur qui me mène directement dans le DOM, à cet élément, et grâce à ce pointeur je vais pouvoir accéder à cet élément et modifier ses propriétés, manipuler cet élément, comme bon me semble, en JavaScript. Alors, par exemple, Que puis-je faire ? Je vais retourner dans Brackets, je vais changer mon message, voilà, je vais dire, par exemple : « cet élément est de type », rappelez-vous la concaténation, avec le + et rappelez-vous également que, dans la vidéo précédente, eh bien, on avait repéré cette propriété « nodeType », sur les différents nœuds du DOM, je vais pouvoir faire : « mainTitle.nodeType », remarquez également, dans Brackets, cette petite liste déroulante qui me donne accès à toutes les propriétés et toutes les méthodes possibles pour cet élément du DOM. Si je prends, ici, « nodeType », que je sauvegarde, que je reviens dans le navigateur et que je rafraîchis, vous voyez que cet élément est de type 1, donc cela correspond à « nodeType=1 », il s'agit d'un « elementNode », comme on l'a appris, dans la vidéo précédente. Alors, je vais également pouvoir dire, par exemple : « cet élément a », je vais changer ceci, et je vais aller chercher le nombre d'enfants de cet élément. Donc, rappelez-vous que cet élément du DOM, « mainTitle », a une propriété qui s'appelle « childNodes », et rappelez-vous que cette propriété « childNodes » est, en fait, une « array » une liste de tous les nœuds qui sont des nœuds enfants de cet élément, et puisque cette propriété, « childNodes », est une « array », eh bien, comme toutes les « arrays » du monde, elle a une propriété « length », et maintenant je vais pouvoir terminer, ici, ma phrase, grâce à une deuxième concaténation : « cet élément a ... nœuds enfants ». Voilà, je sauvegarde ma page, je reviens dans mon navigateur, je rafraîchis ma page, et vous voyez que cet élément a un nœud enfant. Pour le coup, j'aurais pu ne pas mettre de s à « nœud » et à « enfant », puisqu'il n'y en a qu'un, mais je ne pouvais pas le savoir en avance, et le nœud enfant de cet élément, de ce lien, c'est, évidemment, le contenu de ce lien, c'est-à-dire l'image, ou le texte sur lequel je peux cliquer. Alors, je vais revenir ici, dans Brackets, parce que maintenant, je vais vous montrer une autre façon de pouvoir accéder aux éléments. Plutôt que d'utiliser « getElementById », c'est quelque chose que j'utilise quand l'élément que je recherche est équipé d'une ID, je vais écrire une autre variable, que je vais appeler « links », par exemple, eh bien, je vais utiliser, ici, une autre méthode, qui est toujours une méthode de l'objet « document », je vais utiliser plutôt « getElementsByTagName ». Alors, cela va me permettre de repérer plusieurs éléments grâce au nom de la balise HTML que j'utilise pour créer ces éléments. Et, je vais passer, comme information, à cette méthode, « getElementsByTagName », le nom de la balise que je recherche, ici comme je recherche des liens, je recherche la balise « a ». Remarquez, « getElementsByTagName » avec un s, au pluriel, donc je suis sensé retrouver plusieurs éléments, ou, « getElementById », sans s, au singulier, puisque là, forcément, puisqu'il s'agit d'une ID, c'est unique. Alors, si je fais, maintenant, un « console.log », de cette variable « links », que je viens de créer, ici, je vais revenir dans mon navigateur, rafraîchir ma page, et vous voyez que j'obtiens, ici, une « array », alors, si j'ouvre cette « array », vous voyez qu'elle contient 19 éléments, qui sont numérotés de 0 à 18, et donc, je vais pouvoir, maintenant, dans Brackets, faire un petit message plus sophistiqué, et dire, par exemple, « Il y a », je vais prendre « links », vous savez que « links » est une « array », donc, comme toutes les « arrays » du monde, elle a une propriété qui s'appelle « length » : « Il y a "+links.length+" liens dans cette page ». Et donc, ici, je vais pouvoir, vous allez le voir tout de suite, revenir dans mon navigateur et envoyer un petit message, il y a 19 liens dans cette page. Et donc, vous voyez comment, grâce à ces propriétés, grâce à ces méthodes du DOM, j'ai pu accéder à des éléments et puis accéder aux propriétés de ces éléments pour afficher des petits messages. Alors, je vais revenir, rapidement, dans le code HTML de cette page, pour vous montrer qu'ici, j'ai un élément qui s'appelle « homeNav », qui est un élément « ul », qui a un identifiant, donc c'est un élément unique. Et, à l'intérieur de cet « ul », et bien j'ai un, deux, trois, quatre, cinq liens. Alors, comment je vais faire si je veux limiter ma recherche de liens uniquement au contexte de cet élément « homeNav ». Eh bien, je vais revenir dans mon JavaScript, ici, je vais créer une autre variable, que je vais appeler « linksBar », mettons, et cette variable, eh bien ce sera « document.getElementById », et je vais aller rechercher dans mon fichier HTML l'ID « homeNav », attention, il faut bien respecter la « case », donc « Nav » avec un N majuscule, je vais donc copier et coller, ici, cette information pour être sûr de ne pas faire de faute de frappe, et plutôt que d'aller chercher au niveau de ma variable « links », ici, tous les liens de ma page, eh bien je vais, plutôt que de faire, « getElementsByTagName », au niveau du document, je vais faire « getElementsByTagName », au niveau de cette variable « linksBar ». Et donc, je vais pouvoir limiter, comme cela, ma recherche de lien, uniquement au contexte de cette barre de liens que j'ai été repérer précédemment, donc, ici, dans mon « console.log », je vais dire : « Il y a x liens dans la barre de liens. » Voilà, et donc, maintenant, si je reviens au niveau de mon navigateur, vous voyez que j'ai cinq liens dans la barre de liens. Donc, vous voyez, ici, quelques méthodes qui vous permettent d'accéder aux éléments du DOM, la question centrale, c'est de savoir si l'élément que vous voulez atteindre est unique ou pas, s'il est unique, vous avez « getElementById », s'il n'est pas unique, vous avez « getElementsByTagName », alors, il y a encore d'autres méthodes disponibles, pour accéder à ces éléments, rappelez-vous que toutes les procédures qui impliquent ces éléments vont toujours commencer par repérer ces éléments dans le DOM, et donc, il me semblait utile de consacrer une vidéo toute entière au fait de repérer ces éléments.

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
Date de parution :26 avr. 2016

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 !