HTML5 - Navigation dans l'arborescence DOM

Dans un document HTML Nous pouvons naviguer entre les différents éléments qui appartiennent à l'arbre DOM, pour cela nous avons la structure hiérarchique et nous pouvons utiliser plusieurs méthodes avec lesquelles nous pouvons aborder les relations des documents.
Naviguer dans l'arborescence DOM
Comme nous l'avons mentionné, la navigation peut se faire à travers la structure hiérarchique en visualisant le schéma sous forme d'arbre, de cette manière nous pouvons traiter les éléments comme parents, enfants, frères et sœurs.
Avec cela, la recherche d'un élément peut se faire en suivant la philosophie d'une recherche par relation.
Voyons les méthodes disponibles avant de passer aux applications pratiques :

· childNodes : Renvoie tous les éléments enfants de l'élément parent.

· premier enfant: Renvoie l'élément qui est le premier enfant d'un élément parent.

· hasChildNodes (): Renvoie true ou true si l'élément actuel a des nœuds enfants.

· dernier enfant: Renvoie le dernier enfant d'un élément dans le document.

· suivantFrère : Renvoie l'élément frère défini par l'élément HTML actuel.

· parentNode : Renvoie l'élément parent de l'élément HTML actuel.

· précédentFrère : Renvoie l'élément frère avant l'élément HTML actuel.

Une fois que nous connaissons les méthodes dont nous disposons, nous allons voir un exemple de code simple avec lequel nous allons comprendre en quoi consiste la navigation. arbre DOM.

 Exemple 

Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.
 
L'un des aspects les plus intéressants des fruits est la variété disponible dans chaque pays. J'habite près de Londres, dans une région connue pour ses pommes.

Parent Premier enfant Frère précédent Frère suivant

Ce que ce code permet, c'est de pouvoir naviguer entre les éléments et une fois qu'il les ombre en gris clair pour pouvoir différencier dans quelle partie du document nous nous trouvons, voyons dans l'image comment nous devrions le voir dans notre navigateur :

Comme nous pouvons le voir, cette façon de placer les éléments au sein du DOM nous aide lorsque nous ne sommes pas sûrs des identifiants ou lorsqu'il s'agit d'une structure dynamique mais définie.
Avec cela, nous avons terminé ce didacticiel, où nous avons pu rechercher des éléments dans un document HTML sans compter sur des identifiants ou des noms d'éléments, en utilisant simplement leur relation dans la structure hiérarchique.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif