Comprendre DOM (Document Object Model)

Contenu

Introduction au modèle d’objet de document
Qu’est-ce que le DOM ?
Comment fonctionne DOM
Sélecteurs

Introduction

Dans ce blog, nous allons plonger profondément dans DOM et essayer de comprendre ce que c’est et comment cela fonctionne.

Qu’est-ce que le DOM ?

Il agit comme une interface pour les documents HTML et XML, qui représentent le contenu du document comme un structure arborescente.
DOM permet à JavaScript et à d’autres langages de programmation d’interagir avec et de manipuler le contenu et la structure des documents HTML ou XML.
Nous pouvons utiliser DOM pour ajouter ou supprimer des éléments de la page, modifier le texte des éléments ou répondre à un clic de souris ou à des entrées au clavier.

Comment fonctionne DOM ?

Lorsqu’une page Web est chargée, le navigateur crée un modèle d’objet de document (DOM) de la page.
DOM fonctionne comme une structure arborescente et convertit le code HTML en un arbre dans lequel chaque nœud représente les éléments de ce code HTML particulier.
La racine de cet arbre est constituée d’objets de document et chaque nœud représente des éléments tels que des paragraphes, des images, des en-têtes, des liens, etc.

<html>  
  <head>    
    <title> DOM BLOG </title>  
  </head>  
  <body>    
    <button> Click here to read the blog </button>  
  </body> 
</html>

Par exemple, si le code ci-dessus est un code HTML simple, alors ce que DOM fera est de convertir ce code en une structure arborescente afin que la manipulation DOM puisse être effectuée facilement.
Vous trouverez ci-dessous l’image de la façon dont le code ci-dessus est converti en une structure arborescente par DOM.
Dans DOM, les propriétés et les méthodes sont deux types de membres associés à chaque nœud, élément ou objet. Les propriétés et les méthodes, ainsi que certains attributs et fonctions, aident à interagir avec et à manipuler le code HTML pour obtenir le résultat souhaité.
Comprenons les propriétés et les méthodes avec l’exemple :

Les propriétés

Supposons que vous ayez un document HTML avec un élément d’en-tête comme celui-ci :

<h1 id="blog-head">It's a blog about DOM</h1>

Maintenant, si nous voulons changer cet en-tête sans même toucher au HTML, alors ce que nous allons faire est d’utiliser DOM.

Tout d’abord, nous « obtenons » cet élément d’en-tête en JavaScript à l’aide d’un sélecteur appelé getElementbyID(” ”);

Il renvoie la valeur sous forme de object.

var heading = document.getElementById('blog-head');

Ensuite, nous accédons à son HTML interne en utilisant .innerHTML et modifiez sa valeur/texte en conséquence.

heading.innerHTML = 'Read, Learn and Leave your Feedback!';

En faisant toutes ces étapes, nous changeons le innerHTML du titre sans même toucher au HTML.

Ne t’inquiète pas; nous allons apprendre les sélecteurs en quelques minutes.

Les méthodes

Supposons que vous ayez un élément de bouton dans votre document HTML comme celui-ci :

<button id="my-button">Click me to read the blog about DOM</button>

Maintenant, comme ci-dessus, nous sélectionnons d’abord le bouton en JavaScript à l’aide d’un sélecteur appelé .getElementsbyID(” ”).

Il renvoie la valeur en tant qu' »objet ».

Maintenant, nous pouvons manipuler et apporter des modifications avec le bouton sans toucher au HTML. Disons que nous voulons une alerte de « Vous avez cliqué sur le bouton pour lire le blog sur DOM ! » chaque fois qu’un utilisateur clique sur le bouton.

Pour ce faire, nous devons faire deux choses.

Ajouter un écouteur d’événement, qui répond au clic
UN function()qui exécute le bloc de code et renvoie l’alerte qui dit : « Vous avez cliqué sur le bouton pour lire le blog sur DOM ! ».

var button = document.getElementById('my-button'); button.addEventListener('click', function() {  alert('You clicked the button for reading the blog about DOM!'); });

Ce .addEventListener() est ce que nous appelons une méthode dans DOM. Nous y avons passé deux arguments.

clic = puis clic sur le bouton
function() = qui affiche l’alerte lorsque le clic se produit.

REMARQUE : les méthodes ont une parenthèse() à la fin, contrairement aux propriétés.

En résumé, les propriétés sont la valeur d’un élément, d’un nœud ou d’un objet, tandis que les méthodes sont similaires functions() car il a un code qui est exécuté lorsque cette méthode particulière est appelée.

Il y a des différences n/b methods() et functions()mais ce n’est pas le sujet de ce blog.

Sélecteurs

Il existe de nombreuses façons de sélectionner des éléments dans DOM.

Disons que nous avons ce code HTML :

<ul id = title>  <li class = item> One <li>  <li class = item> One <li>  <li class = item> One <li> </ul>

Maintenant, si nous voulons sélectionner le li nous utilisons des sélecteurs :

1) obtenir les éléments par nom de balise (« » );

Ce sélecteur sélectionne tous les éléments par leurs noms de balises (li, ul, p, h1, h1 etc…)
Dans ce cas, nous sélectionnons li
Ce sélecteur sélectionne tous les li dans le document HTML

document.getElementsbyTagName("li"); // HTMLCollection(3) [li.item, li.item, li.item] => Selects all 3 "li" from above HTML code

REMARQUE : Elements est au pluriel, il renvoie donc plusieurs valeurs sous la forme d’un tableau.

Maintenant, stylisons le li

document.getElementsbyTagName("li"); document.getElementsbyTagName("li")[0].style.color = "Red"; //change color of first li to red document.getElementsbyTagName("li")[1].style.color = "Blue"; //change color of second li to Blue document.getElementsbyTagName("li")[2].style.color = "Green"; //change color of Third li to Green

Nous pouvons également modifier la taille et le style du texte en utilisant différentes propriétés à la place de style.

Vous pouvez modifier le style des trois éléments à la fois à l’aide de boucles.

var items = document.getElementsByTagName("li"); for (let i = 0; i < 3; i++) {  items[i].style.backgroundColor = "red"; }

2) obtenir des éléments par nom de classe(””);

Ce sélecteur sélectionne tous les éléments avec des noms de classe particuliers donnés à cet élément.

<ul id = title>  <li class = item> One <li>  <li class = item> One <li>  <li class = item> One <li> </ul> <button class="btn">Click to read blog</button>

document.getElementsbyClassName("btn"); //This selects all the elements with .btn class in it

Semblable à l’exemple ci-dessus, nous pouvons également ajouter différentes propriétés pour obtenir différents résultats, comme changer la couleur du texte, la taille du texte, etc.

document.getElementsByClassName("btn"); document.getElementsByClassName("btn")[0].textContent = "you are reading the blog" //This changes the text content inside the button.

Ce sélecteur renvoie également la valeur sous forme de tableau.

3) obtenir l’élément par ID(” ”);

Ce sélecteur sélectionne l’élément avec l’identifiant unique qui lui est attribué.

<ul id = title>  <li class = item> One <li>  <li class = item> One <li>  <li class = item> One <li> </ul> <button class="btn">Click to read blog</button>

Maintenant, sélectionnons l’élément ul en utilisant son ID.

document.getElementbyID("title"); //Selects element with ID Only

document.getElementbyID("title").style.color = "red"; //Styles the title element and changes its color to Red.

REMARQUE : Le sélecteur d’ID a « Élément » sans « s », ce qui signifie qu’il est singulier, il ne renvoie donc qu’une seule valeur.

En outre, l’ID est une propriété unique, et sur chaque page, il n’y a qu’un seul ID du même nom, ce qui efface également qu’il n’y a qu’un seul élément avec un ID particulier.

4) sélecteur de requête(””);

Ainsi, les trois sélecteurs précédents sont utilisés dans des cas spécifiques (pour le nom de la balise, pour la classe, pour l’ID). Mais, dans le sélecteur de requête, nous pouvons cibler n’importe quel élément avec son nom uniquement, que ce soit h1, h2, h3, ou des ID comme (#title) ou des classes comme (.btn)

<h1 class = "header" id = "first-head">Follow me for more such informative blogs</h1>

Nous pouvons styliser et manipuler l’élément h1 de trois manières ici ;

document.querySelector("h1").style.color = "red" //Here we select the element with its tag name //This changes color of element to Red

document.querySelector("#first-head").style.color = "Blue" //Here we select the same element with its ID //This changes color of element to Blue

document.querySelector(".header").style.color = "Green" //Here we select the same element with its class name //This changes color of element to Green

C’est tout pour ce blog. Lisez, apprenez et laissez vos commentaires importants afin que je puisse améliorer mes futurs blogs. Il y aura une autre partie de ce blog, alors restez à l’écoute pour celle-ci.