Article original : What’s the Document Object Model, and why you should know how to use it.

Par Leonardo Maldonado

Alors, vous avez étudié le HTML, vous avez créé vos premières balises, appris le CSS, fait de beaux formulaires, des boutons incroyables, des pages réactives et avez commencé à montrer à tout le monde à quel point tout cela était génial.

Mais ensuite, vous décidez que vous voulez franchir une nouvelle étape dans votre apprentissage, et vous commencez à vous demander : « Comment puis-je ajouter une animation à ma page ? J'aimerais que ce bouton fasse une animation sur ma page lorsque je clique dessus ! »

Eh bien, c'est là que le DOM intervient pour résoudre votre problème. Vous en avez probablement beaucoup entendu parler, mais vous ne savez peut-être pas encore ce que c'est et quels problèmes il résout. Alors, creusons un peu.

Alors, qu'est-ce que le DOM ?

Connaissez-vous toutes ces animations cool que vous voyez autour de vous, qui vous font penser : « Wow, j'aimerais pouvoir faire quelque chose comme ça » ? Toutes ces animations sont réalisées en manipulant le DOM. Je vais maintenant vous expliquer comment commencer à le manipuler et à rendre vos sites web plus cool.

Le DOM (Document Object Model) est une interface qui représente comment vos documents HTML et XML sont lus par le navigateur. Il permet à un langage (JavaScript) de manipuler, structurer et styliser votre site web. Après que le navigateur a lu votre document HTML, il crée un arbre représentationnel appelé Document Object Model et définit comment cet arbre peut être accessible.

Avantages

En manipulant le DOM, vous avez des possibilités infinies. Vous pouvez créer des applications qui mettent à jour les données de la page sans avoir besoin de rafraîchir. De plus, vous pouvez créer des applications personnalisables par l'utilisateur et modifier la mise en page de la page sans rafraîchir. Vous pouvez glisser, déplacer et supprimer des éléments.

Comme je l'ai dit, vous avez des possibilités infinies — il vous suffit d'utiliser votre créativité.

Représentation par le navigateur

Image L'arbre représentationnel que le navigateur crée après avoir lu votre document.

Dans l'image ci-dessus, nous pouvons voir l'arbre représentationnel et comment il est créé par le navigateur. Dans cet exemple, nous avons quatre éléments importants que vous allez voir souvent :

  1. Document : Il traite tous les documents HTML.
  2. Elements : Toutes les balises qui sont à l'intérieur de votre HTML ou XML deviennent un élément DOM.
  3. Text : Tout le contenu des balises.
  4. Attributes : Tous les attributs d'un élément HTML spécifique. Dans l'image, l'attribut class="hero" est un attribut de l'élément

    .

Manipuler le DOM

Maintenant, nous arrivons à la meilleure partie : commencer à manipuler le DOM. D'abord, nous allons créer un élément HTML comme exemple pour voir quelques méthodes et comment les événements fonctionnent.

<!DOCTYPE html>  <html lang="pt-br">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <meta http-equiv="X-UA-Compatible" content="ie=edge">      <title>Comprendre le DOM (Document Object Model)</title>  </head>  <body>      <div class="container">          <h1><time>00:00:00</time></h1>          <button id="start">Start</button>          <button id="stop">Stop</button>          <button id="reset">Reset</button>      </div>  </body>  </html>

Très simple, n'est-ce pas ? Maintenant, nous allons en apprendre davantage sur les méthodes DOM : comment obtenir nos éléments et commencer à les manipuler.

Méthodes

Le DOM a beaucoup de méthodes. Elles sont la connexion entre nos nœuds (éléments) et les événements, quelque chose que nous allons apprendre plus tard. Je vais vous montrer certaines des méthodes les plus importantes et comment elles sont utilisées. Il y a beaucoup plus de méthodes que je ne vais pas vous montrer ici, mais vous pouvez voir toutes ces méthodes ici.

getElementById()

Cette méthode retourne l'élément qui contient le nom id passé. Comme nous le savons, les id doivent être uniques, donc c'est une méthode très utile pour obtenir uniquement l'élément que vous voulez.

var myStart = document.getElementsById('start');

myStart : Notre nom de variable qui ressemble à notre id passé.

start : id passé. Et dans le cas où nous n'avons aucun id avec ce nom spécifique, il retourne null.

getElementsByClassName()

Cette méthode retourne une HTMLCollection de tous ces éléments contenant le nom de class spécifique passé.

var myContainer = document.getElementsByClassName('container');

myContainer : Notre nom de variable qui ressemble à notre class passé.

.container : notre class passé. Dans le cas où nous n'avons aucune class avec ce nom spécifique, il retourne null.

getElementsByTagName()

Cela fonctionne de la même manière que les méthodes ci-dessus : il retourne également une HTMLCollection, mais cette fois avec une seule différence : il retourne tous ces éléments avec le nom de balise passé.

var buttons = document.getElementsByTagName('button');

buttons : Notre nom de variable qui ressemble à notre nom de balise passé.

button : nom de balise que nous voulons obtenir.

querySelector()

Il retourne le premier élément qui a le sélecteur CSS spécifique passé. Rappelez-vous simplement que le sélecteur doit suivre la syntaxe CSS. Dans le cas où vous n'avez aucun sélecteur, il retourne null.

var resetButton = document.querySelector('#reset');

resetButton : Notre nom de variable qui ressemble à notre sélecteur passé.

#reset : sélecteur passé, et si vous n'avez aucun sélecteur qui correspond, il retourne null.

querySelectorAll()

Très similaire à la méthode querySelector(), mais avec une seule différence : elle retourne tous les éléments qui correspondent au sélecteur CSS passé. Le sélecteur doit également suivre la syntaxe CSS. Dans le cas où vous n'avez aucun sélecteur, il retourne null.

var myButtons = document.querySelector('#buttons');

myButtons : Notre nom de variable qui ressemble à nos sélecteurs passés.

#buttons : sélecteur passé, si vous n'avez aucun sélecteur qui correspond, il retourne null.

Ce sont certaines des méthodes DOM les plus utilisées. Il existe plusieurs autres méthodes que vous pouvez utiliser, comme createElement(), qui crée un nouvel élément dans votre page HTML, et setAttribute() qui vous permet de définir de nouveaux attributs pour les éléments HTML. Vous pouvez les explorer par vous-même.

Encore une fois, vous pouvez trouver toutes les méthodes ici, sur le côté gauche dans Méthodes. Je vous recommande vraiment de jeter un coup d'œil à certaines des autres, car vous pourriez en avoir besoin bientôt.

Maintenant, nous allons apprendre les Événements — après tout, sans eux, nous ne pouvons pas faire d'animations dans nos pages.

Événements

Les éléments DOM ont des méthodes, comme nous venons de le discuter, mais ils ont aussi des événements. Ces événements sont responsables de rendre l'interactivité possible dans notre page. Mais voici une chose que vous ne savez peut-être pas : les événements sont aussi des méthodes.

click

L'un des événements les plus utilisés est l'événement click. Lorsque l'utilisateur clique sur un élément spécifique, il réalisera une certaine action.

myStart.addEventListener('click', function(event) {

// Faire quelque chose ici.

}, false);

Les paramètres de addEventListener() sont :

  1. Le type de l'événement que vous voulez (dans ce cas, 'click').
  2. Une fonction de rappel.
  3. Le useCapture par défaut est false. Il indique si vous voulez ou non « capturer » l'événement.

select

Cet événement est pour lorsque vous voulez dispatcher quelque chose lorsqu'un élément spécifique est sélectionné. Dans ce cas, nous allons dispatcher une simple alerte.

myStart.addEventListener('select', function(event) {

alert('Élément sélectionné !');

}, false);

Ce sont certains des événements les plus couramment utilisés. Bien sûr, nous avons beaucoup d'autres événements que vous pouvez utiliser, comme les événements de glisser-déposer — lorsque l'utilisateur commence à glisser un élément, vous pouvez faire une action, et lorsqu'il dépose cet élément, vous pouvez faire une autre action.

Maintenant, nous allons voir comment nous pouvons parcourir le DOM et utiliser certaines propriétés.

Parcourir le DOM

Vous pouvez parcourir le DOM et utiliser certaines propriétés que nous allons voir maintenant. Avec ces propriétés, vous pouvez retourner des éléments, des commentaires, du texte, etc.

.childNodes

Cette propriété retourne une nodeList des nœuds enfants de l'élément donné. Elle retourne du texte, des commentaires, etc. Donc, lorsque vous voulez l'utiliser, vous devez être prudent.

var container = document.querySelector('.container');

var getContainerChilds = container.childNodes;

.firstChild

Cette propriété retourne le premier enfant de l'élément donné.

var container = document.querySelector('.container');

var getFirstChild = container.firstChild;

.nodeName

Cette propriété retourne le nom de l'élément donné. Dans ce cas, nous avons passé une div, donc elle retournera « div ».

var container = document.querySelector('.container');

var getName = container.nodeName;

.nodeValue

Cette propriété est spécifique pour les textes et commentaires, car elle retourne ou définit la valeur du nœud actuel. Dans ce cas, puisque nous avons passé une div, elle retournera null.

var container = document.querySelector('.container')

var getValue = container.nodeValue;

.nodeType

Cette propriété retourne le type de l'élément donné. Dans ce cas, elle retourne « 1 ».

var container = document.querySelector('.container')

var getValue = container.nodeType;

Mais, que signifie « 1 » de toute façon ? C'est essentiellement le nodeType de l'élément donné. Dans ce cas, il s'agit d'un ELEMENT_NODE et retourne null. Si cela était un attribut, il serait retourné comme « 2 » avec la valeur de l'attribut.

Image Un tableau contenant tous les types de nodeTypes et le nodeName et nodeValue retournés pour chacun d'eux.

Vous pouvez lire plus sur les nodeTypes ici.

Éléments

Ces propriétés, au lieu de celles ci-dessus, nous retournent uniquement des éléments. Elles sont plus souvent utilisées et recommandées car elles peuvent causer moins de confusion et sont plus faciles à comprendre.

.parentNode

Cette propriété retourne le parent du nœud donné.

var container = document.querySelector('.container')

var getParent = container.parentNode;

.firstElementChild

Retourne le premier enfant élément de l'élément donné.

var container = document.querySelector('.container')

var getValue = container.firstElementChild;

.lastElementChild

Retourne le dernier enfant élément de l'élément donné.

var container = document.querySelector('.container')

var getValue = container.lastElementChild;

Ce sont certaines des nombreuses propriétés que le DOM possède. Il est très important pour vous de connaître les bases du DOM, comment il fonctionne, et ses méthodes et propriétés, car un jour vous pourriez en avoir besoin.

Conclusion

Le DOM nous fournit plusieurs API importantes pour créer des applications fantastiques et innovantes. Si vous comprenez les bases, vous pouvez créer des choses incroyables. Si vous voulez en savoir plus sur le DOM, vous pouvez cliquer ici et lire toute la documentation MDN.

? Suivez-moi sur Twitter !
✨ Suivez-moi sur GitHub !

Je cherche une opportunité à distance, donc si vous en avez, j'adorerais en entendre parler, alors s'il vous plaît contactez-moi !