Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

ACCEDER A UN ELEMENT HTML EN JAVASCRIPT

L’objet document et ses méthodes

L’une des grandes forces du JavaScript est de nous permettre de manipuler des éléments HTML en se servant du DOM et de ses méthodes et propriétés.

Cependant, pour manipuler un élément, il faut d’abord pouvoir y accéder. Nous allons voir différents moyens d’accéder aux éléments HTML dans ce chapitre.

Pour accéder aux éléments de notre page HTML, nous allons toujours devoir passer par l’objet Document et non pas l’objet Element comme on pourrait le penser à priori.

Nous allons voir différentes méthodes de l’objet Document qui constituent autant de façons différentes d’accéder à un ou plusieurs éléments HTML :

  • La méthode getElementById() ;
  • La méthode getElementsByTagName() ;
  • La méthode getElementsByClassName() ;
  • La méthode querySelector() ;
  • La méthode querySelectorAll().

La méthode getElementById() de l’objet document

La première méthode, getElementById(), va nous permettre de cibler un élément HTML possédant un attribut id en particulier. C’est certainement la méthode la plus utilisée.

Si l’élément est trouvé, getElementById() va renvoyer l’élément en tant qu’objet. Si aucun élément n’est trouvé, la méthode renverra la valeur null.

Cette méthode va prendre comme unique argument la valeur de l’id de l’élément ciblé. Regardez plutôt l’exemple ci-dessous :

On utilise la méthode getElementById de l’objet document

La méthoode getElementById renvoie des informations par rapport à un élément HTML

Essayer ce code !

Ici, on accède à l’élément HTML de notre page possédant l’id= "gros_titre" grâce à la méthode getElementById() et on stocke les informations renvoyées par cette méthode dans une variable titre.

On affiche ensuite le contenu de cette variable avec une instruction alert().

Ici, la méthode getElementById() renvoie les informations suivantes : l’élément HTML portant l’id= "gros_titre" est un élément de type heading (h).

Cela est tout à fait exact, et c’est déjà un excellent début !

La méthode getElementsByTagName()

La méthode getElementsByTagName() va retourner des informations relatives à tous les éléments HTML d’un même « genre » (tous les éléments p par exemple) dans un tableau.

Cette méthode va prendre le nom du type d’élément à récupérer en argument.

L’intérêt de cette méthode est qu’on va ensuite pouvoir récupérer un élément en question en utilisant un indice du tableau créé.

La méthode getElementsByTagName de l’objet document

getElementsByTagName retourne un tableau avec le type d’élément choisi

Essayer ce code !

Encore une fois, pour le moment, on se contente d’accéder aux éléments HTML. Nous verrons comment modifier le contenu d’un élément HTML dans la partie suivante.

La méthode getElementsByClassName

La méthode getElementsByClassName() va nous permettre d’accéder aux éléments HTML disposant d’un attribut class en particulier. Cette méthode est à nouveau une méthode de l’objet Document.

getElementsByClassName() va prendre la valeur d’un attribut class en argument. Elle va s’utiliser de manière similaire à la méthode précédente et renvoyer également un tableau.

La méthode getElementsByClassName() de l’objet JavaScript document

La méthode getElementsByClassName récupère les éléments HTML selon la valeur de leur attribut class

Essayer ce code !

Les méthodes querySelector() et querySelectorAll()

Les méthodes querySelector() et querySelectorAll() vont nous permettre d’accéder à des éléments HTML correspondant à un certain sélecteur CSS, que ce soit un id, une class, un type d’élément, un attribut au autre.

Ces deux méthodes vont donc prendre un sélecteur CSS en argument. On peut évidemment préciser une suite de sélecteurs pour cibler un élément précis.

querySelector() va renvoyer des informations relatives au premier élément trouvé correspondant au sélecteur CSS sélectionné, tandis que querySelectorAll() va renvoyer des informations sur tous les éléments correspondants.

Une nouvelle fois, un tableau va être créé lorsqu’on utilise querySelectorAll().

Utilisation des méthodes querySelector et querySelectorAll de l’objet JavaScript document

On utilise querySelector et querYselectoAll pour accéder à des éléments HTML via un sélecteur CSS

Essayer ce code !

Ici, on utilise querySelector() pour accéder au premier lien rencontré contenu dans un paragraphe (en utilisant le sélecteur CSS p a). Les informations retournées correspondent à la valeur de l’attribut href de l'élément a.

Ensuite, on utilise querySelectorAll() pour accéder à tous les paragraphes disopsant d'un attribut class= "para" (sélecteur CSS .para).

Accéder au contenu des éléments HTML et au texte

Jusqu’à présent, nous avons pu accéder à des éléments HTML et retourner des informations liées aux objets créés par le DOM à partir de ces éléments.

Cela va déjà être très utile dans de nombreuses situations. Cependant, on va également pouvoir accéder au contenu des éléments HTML, c’est-à-dire à ce qui se situe entre les deux balises ouvrante et fermante d’un élément.

La manière la plus simple de procéder est d’utiliser la propriété innerHTML sur le résultat renvoyé par nos méthodes.

Celle-ci va retourner ce qu’il y a à l’intérieur (« inner » signifie « à l’intérieur » en anglais) d’un élément HTML.

Voyons immédiatement quelques exemples utilisant cette propriété.

Utilisation de la propriété innerHTML en JavaScript

On utilise innerHTML pour récupérer le contenu d’un élément HTML

Essayer ce code !

Faîtes bien attention : innerHTML va bien récupérer tout le contenu d’un élément HTML et pas seulement le texte contenu dans celui-ci. Par exemple, si on applique innerHTML en ciblant notre paragraphe contenant un lien, la propriété va nous retourner tout le code du lien (puisque celui-ci est contenu dans le paragraphe) :

La propriété innerHTML va récupérer tout le contenu d’un élément HTML

Notre lien contenu dans ontre paragraphe est affiché tel quel avec innerHTML

Essayer ce code !

Si l’on souhaite ne récupérer que le contenu textuel présent à l’intérieur d’un élément, on préfèrera alors utiliser la propriété textContent.

textContent ne va récupérer que le contenu textuel à l’intérieur d’un élément HTML

Cette fois ci, seul le texte à l’intérieur de notre paragraphe est récupéré avec textContent

Essayer ce code !

Notez bien qu’on applique les propriétés innerHTML et textContent sur des nœuds de type Element (i.e sur le résultat renvoyé par nos méthodes) et non pas sur le document en soi car cela n’aurait aucun sens.

Vous pouvez donc en déduire que innerHTML et textContent sont des propriétés de l’objet Element et non pas Document.

Accéder directement à des types d’éléments

Le DOM nous offre également la possibilté, via certaines de ses propriétés, d’accéder directement à un type ou une collection d’éléments HTML en particulier.

Par exemple, on va pouvoir accéder à l’élément body grâce à la propriété du même nom ou à un élément de type lien grâce à la propriété links.

Nous allons voir ici les propriétés title, body et links qui appartiennent toutes à l’objet Document.

Notez que la propriété links va retourner tous les éléments area et a possédant un attribut href dans un tableau.

Utilisation de certaines propriétés de l’objet JavaScript document

On peut accéder directement à des éléments HTML via les propriétés de l’objet document

Essayer ce code !

Chapitre précédent

Chapitre suivant