JavaScript : Le débogage et l'analyse de code

Récupérer les éléments du DOM

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La console vous permet de profiter d'un environnement relié à l'interface DOM (Document Object Model). Ainsi, vous récupérerez rapidement les éléments dont vous avez besoin.
03:28

Transcription

Je vous ai montré très rapidement tout à l'heure comment on récupère un élément du DOM. Maintenant je vais vous montrer comment on récupère un élément du DOM avec des outils en plus, parce que sur la console, il y a des outils. Peut-être que vous ne le savez pas, mais on a un « document.querySelector » qui existe depuis maintenant un petit moment, qui est apparu avec la norme HTML5, nous permettant de récupérer un élément du DOM avec soit avec son ID, soit sa classe, un peu ce qu'on veut, à la manière de jQuery. Le « $(' ') », avec une information à l'intérieur, ce n'est pas forcément du jQuery, ici c'est plutôt directement le navigateur qui vous permet d'avoir un raccourci vers « document.querySelector ». Si je fais ça, par exemple, et que je lui demande « h1 », ici il va me récupérer le « h1 » de la page. On voit que ça passe par jQuery, parce que on a jQuery d'installé mais ça marche aussi si on n'a pas jQuery. Maintenant si je lui fais « $$ » et que je lui demande « h1 », il va aussi fonctionner, mais cette fois-ci il va me faire une collection. Vous voyez ici, ce n'est qu'un seul élément qui est récupéré. Si j'en ai plusieurs ici, il me fera vraiment un tableau avec tout ce qui se trouve à l'intérieur. On pourrait faire « test » et « test1 ». Ici, en tout logique, on a des labels. On devrait normalement en avoir plusieurs. Si je lui fais « $('label') », je vais récupérer le premier qui vient. Avec jQuery vous allez récupérer une collection jQuery. Par contre si je lui fais « $$('label') », ici je vais récupérer un tableau, mais ça ne sera un tableau jQuery, ça sera un vrai tableau de DOM. Donc pensez-y, ça c'est le raccourci vers « document.querySelectorAll ». Ça retourne un tableau, un array, avec tous les éléments à l'intérieur. Il y a quelque chose d'intéressant : quand vous avez utilisé ça, vous pouvez utiliser « $0 » jusqu'à « $4 » pour récupérer des éléments qui ont été stockés dans le DOM préalablement. Ici on ne va récupérer des labels que sur le « $0 » et le « $1 ». Mais ça fonctionne très bien, ça va vous permettre de naviguer dans les différents labels, les différentes informations qui ont été stockées par le navigateur et qui ont été mises de côté à l'avance. Ici vous allez récupérer des informations. Vous voyez le « h1 » qu'on avait récupéré au tout début et le label qu'on a récupéré également un petit peu plus haut. Ça, ce sont les différents éléments que vous avez mis de côté. Il vous fait une liste de quatre éléments récupérables qui vous permettent d'aller un peu plus vite, donc d'utiliser cette fonctionnalité-là pour aller plus vite dans la récupération des éléments. N'hésitez pas à utiliser ça quand vous avez besoin de récupérer quelque chose dans la page. Ça va extrêmement vite. Bien évidemment, vous pouvez aussi faire un clic-droit dessus, tout simplement, et vous pouvez l'inspecter. Attention parce que l'inspecter, ici ça ne veut pas dire l'avoir en tant que variable dans votre console. Simplement, vous allez réussir à aller inspecter l'élément. Ici on peut faire pas mal de choses avec. On peut notamment l'éditer, lui ajouter des attributs, on peut le copier. Vous pouvez copier le « XPath », vous pouvez copier le « selector ». Si je copie le « selector », je vais avoir un vrai selector complet qui va le récupérer. Si je m'amuse à copier le « XPath », je vais simplement supprimer tout ça, je vais avoir le chemin qui me permet d'aller vers cet élément, mais sous format XPath. Ce sont des petites possibilités sympas pour travailler avec les éléments du DOM. Vous allez en avoir besoin énormément parce qu'en JavaScript on travaille souvent avec les éléments du DOM, c'est comme ça que ça marche. Ça, ça vous permet de naviguer dans les éléments du DOM. Pensez-y, c'est très important.

JavaScript : Le débogage et l'analyse de code

Prenez en main les techniques et les outils pour améliorer votre code JavaScript. Découvrez Bower, js-beautify, la console de Chrome, les tests unitaires et fonctionnels, etc.

1h29 (26 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :3 mars 2017

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 !