JavaScript - Navigation du DOM

Salut à toi, futurs magiciens JavaScript ! ? Êtes-vous prêt à entreprendre un voyage passionnant à travers le monde magique de la navigation du DOM ? En tant que votre professeur de science informatique de quartier, je suis ravi de vous guider dans cette aventure. Alors, prenez votre boussole virtuelle, et c'est parti pour l'exploration !

JavaScript - DOM Navigation

Qu'est-ce que les nœuds DOM ?

Imaginez le DOM (Document Object Model) comme un arbre généalogique pour votre page web. Chaque élément dans cet arbre est appelé un nœud. Comme dans une véritable famille, ces nœuds ont des relations les uns avec les autres - parents, enfants et frères et sœurs. Génial, non ?

Regardons un exemple simple :

<html>
<head>
<title>Ma super page</title>
</head>
<body>
<h1>Bienvenue !</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>

Dans cette "famille", l'élément <html> est le grand-père, <head> et <body> sont ses enfants, et ainsi de suite. Chacun de ces éléments est un nœud dans notre arbre DOM.

Relations entre les nœuds DOM

Maintenant que nous comprenons ce qu'est un nœud, explorons comment ils sont liés. Dans notre arbre généalogique DOM :

Les nœuds parents ont des enfants
Les enfants ont des parents
Les frères et sœurs sont des nœuds avec le même parent

Par exemple, dans notre exemple HTML précédent :

<html> est le parent de <head> et <body>
<head> et <body> sont des frères et sœurs
<h1> et <p> sont les enfants de <body>

Navigation entre les nœuds avec JavaScript

Il est temps de mettre nos chapeaux d'explorateur ! ? JavaScript nous offre quelques outils pratiques pour naviguer entre ces nœuds. Plongeons dedans !

Accéder au premier enfant d'un élément

Pour obtenir le premier enfant d'un élément, nous utilisons la propriété firstElementChild. Voici comment :

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // Sortie : H1

Dans cet exemple, nous trouvons le premier enfant de la balise <body>, qui est notre élément <h1>.

Accéder au dernier enfant d'un élément

De même, nous pouvons trouver le dernier enfant en utilisant lastElementChild :

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // Sortie : P

Ici, nous obtenons le dernier enfant de <body>, qui est notre élément <p>.

Accéder à tous les enfants d'un élément HTML

Pour voir tous les enfants, utilisez children :

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// Sortie :
// H1
// P

Ce code boucle à travers tous les enfants de <body> et enregistre leurs noms de balises.

Accéder au nœud parent d'un élément HTML

Pour trouver le nœud parent, nous utilisons parentNode :

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // Sortie : BODY

Ici, nous trouvons le parent de notre élément <h1>, qui est <body>.

Accéder au nœud frère suivant

Pour trouver le frère suivant, utilisez nextElementSibling :

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // Sortie : P

Ce code trouve le frère qui suit notre <h1>, qui est l'élément <p>.

Accéder au nœud frère précédent

Et pour le frère précédent, utilisez previousElementSibling :

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // Sortie : H1

Ici, nous trouvons le frère avant notre <p>, qui est l'élément <h1>.

Nœuds racines du DOM

Chaque arbre généalogique a ses racines, et dans le DOM, nous en avons trois principales :

document.documentElement - L'élément racine (généralement <html>)
document.head - L'élément <head>
document.body - L'élément <body>

console.log(document.documentElement.tagName); // Sortie : HTML
console.log(document.head.tagName); // Sortie : HEAD
console.log(document.body.tagName); // Sortie : BODY

Propriété nodeName du DOM

Chaque nœud a un nom, que nous pouvons accéder via la propriété nodeName :

let heading = document.querySelector('h1');
console.log(heading.nodeName); // Sortie : H1

Propriété nodeValue du DOM

La propriété nodeValue nous donne la valeur d'un nœud. Pour les nœuds de texte, c'est le contenu textuel :

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // Sortie : Bienvenue !

Types de nœuds dans le DOM

Tous les nœuds ne sont pas créés égaux ! Il existe différents types de nœuds dans le DOM. Voici les principaux :

Type de nœud	Description	Valeur nodeType
Nœud Élément	Tout élément HTML (comme `<p>`, `<div>`, etc.)	1
Nœud Attribut	Un attribut d'un élément HTML	2
Nœud Texte	Le texte à l'intérieur d'un élément HTML	3
Nœud Commentaire	Un commentaire HTML	8
Nœud Document	Le document entier	9

Propriété nodeType du DOM

Nous pouvons utiliser la propriété nodeType pour déterminer le type de nœud avec lequel nous avons affaire :

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('This is a comment');

console.log(element.nodeType); // Sortie : 1 (Nœud Élément)
console.log(textNode.nodeType); // Sortie : 3 (Nœud Texte)
console.log(commentNode.nodeType); // Sortie : 8 (Nœud Commentaire)

Et voilà, les amis ! Vous avez appena navigué dans le DOM comme un pro. Souvenez-vous, la pratique fait toujours parfait, alors n'ayez pas peur d'expérimenter avec ces concepts. Avant de vous en rendre compte, vous traverserez l'arbre DOM plus vite qu'un écureuil dans une usine de noix ! ?️

Bonne programmation, et que le DOM soit avec vous ! ?

Credits: Image by storyset

Tutoriel précédent:

JavaScript - Animation DOM

Tutoriel suivant:

JavaScript - Collections DOM