Naviguer ou se déplacer dans le DOM en JavaScript grâce aux noeuds

Dans la leçon précédente, nous avons vu comment accéder directement à des éléments et comment accéder à leur contenu ou le modifier.

Dans ce nombreux cas, cependant, nous n’allons pas pouvoir accéder directement à un élément car nous ne disposerons pas de moyen de le cibler. Dans cette situation, il va être nécessaire de savoir comment naviguer dans le DOM, c’est-à-dire comment se déplacer de nœud en nœud pour atteindre celui qui nous intéresse. Cela va être l’objet de cette leçon.

 

Accéder au parent ou à la liste des enfants d’un nœud

La propriété parentNode de l’interface Node renvoie le parent du nœud spécifié dans l’arborescence du DOM ou null si le nœud ne possède pas de parent.

La propriété childNodes de cette même interface renvoie une liste des nœuds enfants de l’élément donné.

A noter que la propriété childNodes renvoie tous les nœuds enfants et cela quels que soient leurs types : nœuds élément, nœuds texte, nœuds commentaire, etc.

Si on ne souhaite récupérer que les nœuds enfants éléments, alors on utilisera plutôt la propriété children du mixin ParentNode (qui est implémenté par Document et par Element).

Notez également que le parent d’un élément n’est pas forcément un nœud Element mais peut également être un nœud Document. La propriété parentNode renverra le parent d’un nœud quel que soit son type.

Pour n’accéder au parent que dans le cas où celui-ci est un nœud Element, on utilisera plutôt la propriété parentElement de Node qui ne renvoie le parent d’un nœud que s’il s’agit d’un nœud Element ou null sinon.

See the Pen
Cours JavaScript 8.3.1 by Pierre (@pierregiraud)
on CodePen.

 

Accéder à un nœud enfant en particulier à partir d’un nœud parent

La propriété firstChild de l’interface Node renvoie le premier nœud enfant direct d’un certain nœud ou null s’il n’en a pas.

La propriété lastChild, au contraire, renvoie le dernier nœud enfant direct d’un certain nœud ou null s’il n’en a pas.

Notez que ces deux propriétés vont renvoyer les premiers et derniers nœuds enfants quels que soient leurs types (nœuds élément, nœuds texte ou nœuds commentaire).

Pour renvoyer le premier et le dernier nœud enfant de type élément seulement d’un certain nœud, on utilisera plutôt les propriétés firstElementChild et lastElementChild du mixin ParentNode.

See the Pen
Cours JavaScript 8.3.2 by Pierre (@pierregiraud)
on CodePen.

 

Accéder au nœud précédent ou suivant un nœud dans l’architecture DOM

La propriété previousSibling de l’interface Node renvoie le nœud précédent un certain nœud dans l’arborescence du DOM (en ne tenant compte que des nœuds de même niveau) ou null si le nœud en question est le premier.

La propriété nextSibling, au contraire, renvoie elle le nœud suivant un certain nœud dans l’arborescence du DOM (en ne tenant compte que des nœuds de même niveau) ou null si le nœud en question est le dernier.

Ces deux propriétés vont renvoyer le nœud précédent ou suivant un certain nœud, et cela quel que soit le type du nœud précédent ou suivant.

Si on souhaite accéder spécifiquement au nœud élément précédent ou suivant un certain nœud, on utilisera plutôt les propriétés previousElementSibling et nextElementSibling du mixin NonDocumentTypeChildNode (mixin implémenté par Element).

See the Pen
Cours JavaScript 8.3.3 by Pierre (@pierregiraud)
on CodePen.

 

Obtenir le nom d’un nœud, son type ou son contenu

Les propriétés de Node renvoient toujours des objets, ce qui signifie qu’on va pouvoir directement utiliser d’autres propriétés sur ces objets.

Lorsqu’on accède à un certain nœud, on voudra généralement obtenir le nom de de nœud, savoir ce qu’il contient et connaitre son type. Nous allons pour cela pouvoir utiliser les propriétés suivantes de l’interface Node :

• La propriété nodeName qui retourne une chaine de caractères contenant le nom du nœud (nom de la balise dans le cas d’un nœud de type Element ou #text dans le cas d’un nœud de type Text) ;
• La propriété nodeValuequi renvoie ou permet de définir la valeur du nœud. On pourra notamment utiliser cette propriété sur des nœuds #text pour obtenir le texte qu’ils contiennent ;
• La propriété nodeType renvoie un entier qui représente le type du nœud (tel que vu dans la première leçon de cette partie).

See the Pen
Cours JavaScript 8.3.4 by Pierre (@pierregiraud)
on CodePen.