Qu'est-ce que le modèle d'objet de document et pourquoi vous devez savoir comment l'utiliser.

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

Mais alors vous décidez que vous voulez faire un autre pas dans votre apprentissage, et vous avez commencé à vous demander: «Comment puis-je ajouter une animation à ma page? J'aurais aimé que ce bouton fasse une animation sur ma page lorsque j'ai cliqué dessus! »

Eh bien, c'est là que le DOM vient 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 cela résout. Alors allons-y.

Alors, quel est le DOM?

Connaissez-vous toutes ces animations sympas que vous voyez autour, qui vous font penser à vous-même, "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 la manière dont vos documents HTML et XML sont lus par le navigateur. Il permet à un langage (JavaScript) de manipuler, structurer et styliser votre site Web. Une fois que le navigateur a lu votre document HTML, il crée une arborescence de représentation appelée modèle d'objet de document et définit comment cet arbre est 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 d'une actualisation. En outre, vous pouvez créer des applications personnalisables par l'utilisateur, puis modifier la mise en page de la page sans actualisation. Vous pouvez faire 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

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

  1. Document : Il traite tous les documents HTML .
  2. Éléments : toutes les balises qui se trouvent à l'intérieur de votre HTML ou XML se transforment en un élément DOM.
  3. Texte : tout le contenu des balises.
  4. Attributs : tous les attributs d'un élément HTML spécifique . Dans l'image, l'attribut class = "hero" est un attribut de l' élément < p>.

Manipuler le DOM

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

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Très simple, non? Nous allons maintenant en apprendre plus sur les méthodes DOM: comment récupérer nos éléments et commencer à manipuler.

Méthodes

Le DOM a beaucoup de méthodes. Ils sont la connexion entre nos nœuds (éléments) et les événements, quelque chose que nous en apprendrons plus tard. Je vais vous montrer quelques-unes 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 identifiants doivent être uniques, c'est donc une méthode très utile pour obtenir uniquement l'élément souhaité.

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 pas d' identifiant avec ce nom spécifique, il renvoie null .

getElementsByClassName ()

Cette méthode retourne une HTMLCollection de tous ces éléments contenant la classe de nom spécifique passée.

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

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

.container : notre classe a réussi. Dans le cas où nous n'avons aucune classe avec ce nom spécifique, il renvoie null .

getElementsByTagName ()

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

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

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

bouton : nom de la balise que nous voulons obtenir.

querySelector ()

Il renvoie le premier élément auquel le sélecteur CSS spécifique est passé. N'oubliez pas que le sélecteur doit suivre la syntaxe CSS . Si vous n'avez pas de sélecteur , il renvoie null .

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

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

#reset : sélecteur passé, et si vous n'avez aucun sélecteur correspondant, il renvoie 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 . Si vous n'avez pas de sélecteur , il renvoie null .

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

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

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

Ce sont quelques-unes 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 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 à quelques-uns des autres, car vous pourriez en avoir besoin bientôt.

Maintenant, nous allons en apprendre davantage sur les événements - après tout, sans eux, nous ne pouvons pas créer d'animations dans nos pages.

Événements

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

Cliquez sur

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

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Les paramètres addEventListener () sont:

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

sélectionner

Ces événements sont destinés lorsque vous souhaitez distribuer quelque chose lorsqu'un élément spécifique est sélectionné. Dans ce cas, nous allons envoyer une simple alerte .

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

Ce sont quelques-uns 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 - lorsqu'un utilisateur commence à faire glisser un élément, vous pouvez effectuer une action, et lorsqu'il déposera cet élément, vous pouvez effectuer une autre action.

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

Traverser 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 renvoyer des éléments, des commentaires, du texte, etc.

.childNodes

Cette propriété renvoie une liste de nœuds des nœuds enfants de l'élément donné. Il renvoie du texte, des commentaires, etc. Donc, lorsque vous souhaitez l'utiliser, vous devez être prudent.

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

.premier enfant

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

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

.nodeName

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

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

.nodeValue

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

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

.nodeType

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

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

Mais que signifie « 1 » de toute façon? Il s'agit essentiellement du nodeType de l'élément donné. Dans ce cas, il s'agit d'un _ELEMENT_NODE_ et renvoie null. S'il s'agissait d'un attribut, il nous serait renvoyé sous la forme « 2 » ainsi que la valeur de l'attribut.

Vous pouvez en savoir plus sur nodeTypes ici.

Éléments

Ces propriétés, au lieu de celles ci-dessus, ne nous renvoient que des éléments . Ils sont plus souvent utilisés et recommandés car ils peuvent causer moins de confusion et sont plus faciles à comprendre.

.parentNode

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

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

.firstElementChild

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

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

.lastElementChild

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

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

Voici quelques-unes des nombreuses propriétés du DOM. Il est très important pour vous de connaître les bases du DOM, son fonctionnement, ses méthodes et ses propriétés, car un jour vous en aurez peut-être besoin.

Conclusion

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

? F me uivez sur Twitter!

F uivez moi sur GitHub!

Je recherche une opportunité à distance, donc si j'en ai une, j'aimerais en entendre parler, alors contactez-moi!