TOC

Comprendre l’arborescence et les nœuds DOM

introduction

Le DOM est souvent appelé arbre * DOM * et consiste en une arborescence d’objets appelée * nœuds *. Dans la Introduction to the DOM, nous avons expliqué en quoi consiste le Document Object Model (DOM), comment accéder au `+ document + `object et modifiez ses propriétés avec le console, et la différence entre le code source HTML et le DOM.

Dans ce didacticiel, nous passerons en revue la terminologie HTML, essentielle pour utiliser JavaScript et le DOM, et pour en savoir plus sur l’arborescence DOM, quels sont les nœuds et comment identifier les types de nœuds les plus courants. Enfin, nous allons passer au-delà de la console et créer un programme JavaScript pour modifier le DOM de manière interactive.

Terminologie HTML

Comprendre la terminologie HTML et JavaScript est essentiel pour comprendre comment utiliser le DOM. Passons brièvement en revue la terminologie HTML.

Pour commencer, examinons cet élément HTML.

<a href="index.html">Home</a>

Nous avons ici un élément anchor, qui est un lien vers + index.html.

  • + a + est le * tag *

  • + href + est l’attribut *

  • + index.html + est la * valeur d’attribut *

  • + Home + est le * texte *.

Tout ce qui se trouve entre les balises d’ouverture et de fermeture combinées forme l’ensemble de l’élément HTML * *.

Nous allons travailler avec le + index.html + du previous tutorial:

index.html

<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
 </body>

</html>

Le moyen le plus simple d’accéder à un élément avec JavaScript est d’utiliser l’attribut + id +. Ajoutons le lien que nous avons ci-dessus dans votre fichier + index.html avec un` + id` de + nav +.

index.html

...
<body>
 <h1>Document Object Model</h1>

</body>
...

Chargez ou rechargez la page dans la fenêtre de votre navigateur et consultez le DOM pour vous assurer que le code a été mis à jour.

Nous allons utiliser la méthode + getElementById () + pour accéder à l’élément entier. Dans la console, tapez ce qui suit:

document.getElementById('nav');
Output<a id="nav" href="index.html">Home</a>

Nous avons récupéré l’ensemble de l’élément en utilisant + getElementById () +. Maintenant, au lieu de taper cet objet et cette méthode à chaque fois que nous voulons accéder au lien `+ nav + ', nous pouvons placer l’élément dans une variable pour l’utiliser plus facilement.

let navLink = document.getElementById('nav');

La variable + navLink + contient notre élément d’ancrage. À partir de là, nous pouvons facilement modifier les attributs et les valeurs. Par exemple, nous pouvons changer la direction du lien en modifiant l’attribut + href +:

navLink.href = 'https://www.wikipedia.org';

Nous pouvons également modifier le contenu du texte en réaffectant la propriété + textContent +:

navLink.textContent = 'Navigate to Wikipedia';

Désormais, lorsque nous visualisons notre élément, soit dans la console, soit en vérifiant la balise Elements, nous pouvons voir comment l’élément a été mis à jour.

navLink;
Output<a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

Cela se reflète également sur le front-end du site.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/updated-DOM-link.png [Lien mis à jour via DOM]

L’actualisation de la page rétablira toutes les valeurs d’origine.

À ce stade, vous devez comprendre comment utiliser une méthode + document + pour accéder à un élément, comment affecter un élément à une variable et comment modifier les propriétés et les valeurs de l’élément.

L’arbre et les nœuds DOM

Tous les éléments du DOM sont définis en tant que * nœuds *. Il existe de nombreux types de nœuds, mais nous travaillons le plus souvent avec trois principaux:

  • * Élément * nœuds

  • * Texte * noeuds

  • * Commentaire * noeuds

Lorsqu’un élément HTML est un élément du DOM, il est appelé * nœud d’élément *. Tout texte isolé en dehors d’un élément est un * noeud de texte *, et un commentaire HTML est un * noeud de commentaire *. En plus de ces trois types de nœuds, le + document est lui-même un nœud * document *, qui est la racine de tous les autres nœuds.

Le DOM consiste en une structure * arbre * de nœuds imbriqués, souvent appelée * arbre DOM *. Vous connaissez peut-être un arbre généalogique ancestral, composé de parents, d’enfants et de frères et soeurs. Les nœuds du DOM sont également appelés parents, enfants et frères et soeurs, en fonction de leur relation avec les autres nœuds.

Pour démontrer, créez un fichier + nodejs.html. Nous allons ajouter du texte, des commentaires et des nœuds d’éléments.

nœuds.html

<!DOCTYPE html>
<html>

 <head>
   <title>Learning About Nodes</title>
 </head>

 <body>
   <h1>An element node</h1>
   <!-- a comment node -->
   A text node.
 </body>

</html>

Le nœud d’élément + html est le nœud parent. + head et` + body` sont des frères et soeurs, enfants de + html. + body + contient trois nœuds enfants, tous frères: le type de nœud ne modifie pas le niveau auquel il est imbriqué.

Type de nœud d’identification

Chaque nœud d’un document a un * type de nœud *, auquel on accède via la propriété + nodeType +. Le réseau de développeurs Mozilla dispose d’une liste à jour de all constantes de type de nœud. Vous trouverez ci-dessous un tableau des types de nœuds les plus courants avec lesquels nous travaillons dans ce didacticiel.

Node Type Value Example

ELEMENT_NODE

1

The <body> element

TEXT_NODE

3

Text that is not part of an element

COMMENT_NODE

8

<!-- an HTML comment -->

Dans l’onglet Elements des Outils de développement, vous remarquerez peut-être que chaque fois que vous cliquez sur une ligne du DOM et la mettez en surbrillance, la valeur + == $ 0 + apparaît à côté. C’est un moyen très pratique d’accéder à l’élément actuellement actif dans les outils de développement en tapant + $ 0 +.

Dans la console de * nodes.html *, cliquez sur le premier élément du + body +, qui est un élément + h1 +.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/highlighted-line.png [Type de nœud DOM]

Dans la console, obtenez le * type de noeud * du noeud actuellement sélectionné avec la propriété + nodeType +.

$0.nodeType;
Output1

Avec l’élément + h1 + sélectionné, vous verriez + 1 + comme sortie, ce qui peut être corrélé à + ​​ELEMENT_NODE +. Faites la même chose pour le texte et le commentaire. Ils produiront respectivement + 3 + et + 8 +.

Lorsque vous savez comment accéder à un élément, vous pouvez voir le type de nœud sans mettre l’élément en surbrillance dans le DOM.

document.body.nodeType;
Output1

En plus de + nodeType +, vous pouvez également utiliser la propriété + nodeValue + pour obtenir la valeur d’un noeud de texte ou de commentaire et + + NomNoeud + pour obtenir le nom de balise d’un élément.

Modifier le DOM avec des événements

Jusqu’à présent, nous avons seulement vu comment modifier le DOM dans la console, ce que nous avons vu est temporaire; chaque fois que la page est actualisée, les modifications sont perdues. Dans le tutoriel Introduction to the DOM, nous avons utilisé la console pour mettre à jour la couleur d’arrière-plan du corps. Nous pouvons combiner ce que nous avons appris tout au long de ce didacticiel pour créer un bouton interactif qui le fait lorsque vous cliquez dessus.

Revenons à votre fichier + index.html et ajoutons un élément` + button` avec un + id +. Nous allons également ajouter un lien vers un nouveau fichier dans un nouveau répertoire + js + + js / scripts.js +.

index.html

<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
   <button id="changeBackground">Change Background Color</button>

   <script src="scripts.js"></script>
 </body>

</html>

Un * événement * en JavaScript est une action de l’utilisateur. Lorsque l’utilisateur passe sa souris sur un élément, clique sur un élément ou appuie sur une touche spécifique du clavier, il s’agit de tous les types d’événements. Dans ce cas particulier, nous souhaitons que notre bouton écoute et soit prêt à exécuter une action lorsque l’utilisateur clique dessus. Nous pouvons le faire en ajoutant un * écouteur d’événement * à notre bouton.

Créez + scripts.js + et enregistrez-le dans le nouveau répertoire + js +. Dans le fichier, nous allons d’abord trouver l’élément + button + et l’assigner à une variable.

js / scripts.js

let button = document.getElementById('changeBackground');

En utilisant la méthode + addEventListener () +, nous indiquerons au bouton d’écouter le clic et exécuterons une fonction une fois cliquée.

js / scripts.js

...
button.addEventListener('click', () => {
 // action will go here
});

Enfin, à l’intérieur de la fonction, nous écrirons le même code à partir du tutoriel previous pour changer la couleur d’arrière-plan en + fuchsia + .

js / scripts.js

...
document.body.style.backgroundColor = 'fuchsia';

Voici notre script entier:

js / scripts.js

let button = document.getElementById('changeBackground');

button.addEventListener('click', () => {
 document.body.style.backgroundColor = 'fuchsia';
});

Une fois que vous enregistrez ce fichier, actualisez + index.html dans le navigateur. Cliquez sur le bouton pour déclencher l’événement.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/event-button.png [Modifier l’arrière-plan avec des événements]

La couleur d’arrière-plan de la page a été changée en fuchsia en raison de l’événement JavaScript.

Conclusion

Dans ce tutoriel, nous avons examiné la terminologie qui nous permettra de comprendre et de modifier le DOM. Nous avons appris comment le DOM est structuré comme une arborescence de noeuds qui sont généralement des éléments HTML, du texte ou des commentaires, et nous avons créé un script permettant à un utilisateur de modifier un site Web sans avoir à saisir manuellement du code dans la console du développeur.

Related