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

NAVIGUER DANS LE DOM HTML

Naviguer entre les nœuds créés par le DOM

Dans les chapitres précédents, nous avons vu comment manipuler le code HTML en JavaScript en se servant du DOM.

Grâce au DOM, nous avons en effet pu accéder à nos éléments HTML car celui-ci crée une « copie » de notre page HTML dans laquelle tout « élément » (pris au sens large) est un objet de type « node » ou nœud en français.

Ensuite, nous avons vu qu’il existait différents sous-types de nœuds, ou différents types d’objets de type nœud : l’objet Document, l’objet Element, etc.

Finalement, nous avons vu différentes méthodes et propriétés pour accéder à un nœud en particulier et pouvoir travailler dessus.

Parfois, cependant, nous allons vouloir également accéder au nœud parent ou aux enfants et n’allons pas pouvoir le faire directement.

Il existe alors des propriétés spécialisées qui vont nous permettre de nous déplacer entre les nœuds très simplement.

Dans ce chapitre nous allons donc étudier les propriétés suivantes :

  • parentNode ;
  • childNodes et nodeValue ;
  • firstChild et lastChild ;
  • nextSibling et previousSibling.

La propriété parentNode

La propriété parentNode va nous permettre d’accéder au nœud parent d’un certain nœud, et donc de nous déplacer dans le DOM de notre page HTML.

Cette propriété est une propriété de l’objet Element.

Utilisation de la propriété JavaScript parentNode

Grâce à parentNode, on peut accéder au nœud parent d’un certain nœud JavaScript

Essayer ce code !

Dans l’exemple ci-dessus, par exemple, parentNode nous permet d’accéder au parent de notre élément p, c’est-à-dire à notre div.

Une nouvelle fois, cette propriété va s’avérer intéressante dans le cas où il et difficile d’accéder à un certain nœud (par exemple, dans le cas où il y aurait plusieurs div dans une page sans class ni id).

Les propriétés childNodes et nodeValue

ChildNodes, à l’inverse de parentNode, va nous permettre d’accéder aux nœuds enfants d’un certain nœud HTML.

Cette propriété va renvoyer un tableau contenant les enfants d’un certain nœud. On va donc pouvoir soit récupérer tous les enfants d’un coup avec une boucle, soit accéder à un élément en particulier en passant une clef à childNodes.

Attention cependant : retenez bien qu’un nœud élément ne contient pas de texte à proprement parler selon le DOM, mais plutôt un nœud de type texte contenant une valeur qui est du texte.

C’est pourquoi si vous désirez accéder à cette valeur textuelle, vous devrez soit utiliser nodeValue (« valeur contenue dans le nœud ») en plus de childNodes, soit directement utiliser innerHTML par exemple.

Faites cependant très attention au fonctionnement de childNodes : les espaces dans votre code (l’indentation par exemple) vont être considérés comme des nœuds textuels enfants !

Utilisation de childNodes et nodeValue en JavaScript

On utilise childNodes et nodeValue pour récupérer des éléments HTML enfants

Essayer ce code !

Ci-dessus, il faut faire bien attention pour bien compter les différents éléments des tableaux créés par childNodes.

En effet, le premier enfant de notre body pour childNodes va être l’espace entre la balise ouvrante et l’élément h1. Le deuxième enfant va être l’élément h1, puis le troisième va à nouveau être un espace et enfin le quatrième sera notre div.

Même chose ensuite à l’intérieur de notre div : le premier enfant est à nouveau un espace dû à l’indentation, et le second est notre premier paragraphe.

Faites également attention à bien réutiliser une nouvelle fois childNodes sur notre paragraphe afin d’accéder au texte et ensuite seulement de le récupérer grâce à nodeValue.

Au final, cette nouvelle technique peut vous sembler laborieuse et vous avez parfaitement raison. C’est pour cela que généralement on préférera utiliser un ciblage direct et innerHTML tant que possible.

Cependant, il me semblait intéressant de vous montrer cela afin que vous puissiez comprendre un code qui l’utilise.

Les propriétés firstChild et lastChild

On continue d’explorer les possibilités de navigation dans le DOM qui nous sont offertes avec les propriétés firstChild et lastChild.

Ces deux propriétés vont nous permettre d’accéder respectivement au premier et au dernier enfant d’un nœud.

Comme pour childNodes, les espaces à l’intérieur des éléments vont être considérés comme du texte et le texte lui même comme un nœud texte.

Il va donc une nouvelle fois faire bien attention à cela et particulièrement lorsque l’on souhaite récupérer du texte en soi.

Utilisation des propriétés JavaScript firstChild et lastChild de l’objet element

On utilise firstChild et lastChild pour accéder aux nœuds enfants d’un noeud

Essayer ce code !

Ici, on accède directement au premier et dernier enfant de notre deuxième paragraphe avec firstChild et lastChild.

Ensuite, on affiche le contenu de ces enfants. Pour cela, on récupère ce qu’ils contiennent de deux façons différentes : avec nodeValue pour le premier enfant (qui est un nœud textuel), et avec innerHTML pour le dernier (qui est un nœud élément).

Une nouvelle fois, il existe différentes façons de procéder pour accéder à un nœud. Dans ce chapitre, je ne vous montre que de nouvelles méthodes qui peuvent parfois s’avérer plus simples et qu’il est bon de connaître.

Les propriétés nextSibling et previousSibling

Les propriétés nextSibling et previousSibling vont nous permettre d’accéder respectivement au nœud « frère » (c’est-à-dire de même niveau) suivant le nœud ciblé ou à celui précédent le nœud ciblé.

Ces deux propriétés appartiennent encore à l’objet Element.

Attention une nouvelle fois aux espaces dans votre code, considérés comme des nœuds textuels.

Utilisation des propriétés JavaScript nextSibling et previousSibling

On peut naviguer dans le DOM HTML grâce à nextSibling et previousSibling

Essayer ce code !

Dans l’exemple ci-dessus, nous n’utilisons que nextSibling car previousSibling s’utilise exactement de la même façon.

Nous commençons par accéder à notre élément h1, puis nous utilisons ensuite deux fois nextSibling afin d’accéder à notre div.

En effet, rappelez vous bien que l’espace dans notre code entre notre h1 et notre div va être considéré comme un nœud.

Ainsi, le premier nextSibling m’amène jusqu’à cet espace tandis que le second m’amène donc jusqu’à mon div.

Enfin, nous modifions le contenu de notre div en changeant son innerHTML.

Chapitre précédent

Chapitre suivant