Comprendre les bases du DOM (Document Object Model) -

Si vous êtes sur cette page vous cherchez sûrement à améliorer vos connaissance pour le DOM (Document Object Model) autrement dis « modèle d’objet de document » une interface de programmation normalisée par le W3C, qui permet à des scripts d’examiner et de modifier le contenu du navigateur web.

En utilisant le DOM, la composition d’un document HTML ou XML est représenté sous forme d’un jeu d’objets lesquels peuvent représenter une fenêtre, un style, un texte, par exemple – reliés selon une structure en arbre.

À l’aide de du DOM, un script peut modifier le document présent dans le navigateur en ajoutant ou en supprimant des nœuds de l’arbre.

Sommaire

Qu’est ce que le DOM ?
Les éléments du DOM
Manipuler le DOM
Les événements du DOM
L’asynchrones sur le DOM
Sécurité et DOM

Qu’est ce que le DOM ?

Premièrement le DOM est une interface de programmation qui transforme une page web en un modèle d’objet que le navigateur peut comprendre. Lorsque le navigateur charge une page web, il analyse le contenu de la page et crée ce contenu en mémoire sous la forme d’une arborescence DOM. Cette arborescence contient tous les éléments de la page (par exemple, le titre, le paragraphe, l’image, les liens), et ces éléments sont liés les uns aux autres.

Pour finir, le DOM considère un document HTML comme un arbre de nœuds. Un nœud représente un élément HTML.

C’est partit ! Examinons ce code HTML pour mieux comprendre la structure arborescente du DOM.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Exemple de DOM</title>
  </head>
  <body>
    <h1>Exemple de DOM</h1>
	<h2>En savoir plus à propos du DOM</h2>
  </body>
</html>

Les éléments du DOM

JavaScript est le principal langage utilisé pour interagir avec le DOM. Vous pouvez accéder aux éléments du DOM en utilisant des méthodes telles que :

getElementById()
getElementsByClassName()
querySelector()

Ces méthodes permettent de sélectionner et de manipuler des éléments spécifiques sur votre page.

#getElementById()

var element = document.getElementById("myElementId");

#getElementsByClassName()

var elements = document.getElementsByClassName("myClassName");

#querySelector()

var element = document.querySelector("#myElementId");
var elements = document.querySelectorAll(".myClassName");

Manipuler le DOM

La manipulation du DOM est une compétence essentielle pour les développeurs web. Elle permet de créer des pages interactives en temps réel, d’ajouter de nouveaux éléments, de supprimer des éléments existants, et de mettre à jour les propriétés de style. Dans cet article, nous explorerons quelques techniques de manipulation du DOM, tout en soulignant leur impact sur le référencement.

Changement de Contenu d’Élément

L’un des aspects clés de la manipulation du DOM est la capacité à changer dynamiquement le contenu d’un élément. On peut utiliser les propriétés innerHTML ou textContent pour effectuer ces changements.

Attention ! Le innerHTML comporte une faille XSS (voir l’article)

// Exemple : Changer le contenu d'un élément var element = document.getElementById("monElementId"); element.innerHTML = "Nouveau contenu"; // ou element.textContent = "Nouveau contenu";

Création d’un Nouvel Élément

Ajouter un nouvel élément à la page est une autre fonctionnalité importante du DOM. Cela peut être réalisé en créant un nouvel élément HTML et en l’ajoutant au corps du document.

// Exemple : Créer un nouvel élément var nouvelElement = document.createElement("div"); nouvelElement.innerHTML = "Nouvel Élément"; document.body.appendChild(nouvelElement);

Suppression d’Éléments

Supprimer un élément existant implique de trouver son parent, puis d’utiliser la méthode removeChild().

// Exemple : Supprimer un élément existantvar elementASupprimer = document.getElementById("monElementId");elementASupprimer.parentNode.removeChild(elementASupprimer);

Modification de Styles et Propriétés

En plus du contenu, le DOM permet de changer les propriétés de style et autres propriétés des éléments.

// Exemple : Changer la couleur du textevar element = document.getElementById("monElementId"); element.style.color = "rouge";

Les événements du DOM

Dans la quête de rendre votre site web encore plus dynamique, les écouteurs d’événements jouent un rôle central. En utilisant la fonction addEventListener(), vous pouvez non seulement détecter des événements spécifiques, mais aussi réagir de manière appropriée pour améliorer l’expérience utilisateur. Prenons l’exemple de la détection d’un clic sur un bouton :

// Exemple : Ajouter un écouteur d'événements pour un clic sur un boutonvar bouton = document.getElementById("monBoutonId"); bouton.addEventListener("click", function() { // Votre code de réaction au clic ici });

Avec cette approche, vous pouvez exécuter du code personnalisé dès qu’un utilisateur clique sur le bouton spécifié. Cela ouvre un monde de possibilités pour créer des fonctionnalités interactives sur votre site.

Utilisation des Écouteurs d’Événements pour Améliorer l’Expérience Utilisateur

Les écouteurs d’événements permettent de rendre votre site plus réactif aux actions des utilisateurs. Que ce soit pour valider des formulaires, charger du contenu supplémentaire, ou simplement améliorer la navigation, les possibilités sont vastes.

Validation de Formulaire en Temps Réel

var formulaire = document.getElementById("monFormulaireId"); formulaire.addEventListener("input", function() {  // Code de validation du formulaire ici});

Chargement Dynamique de Contenu

var lien = document.getElementById("monLienId");lien.addEventListener("mouseover", function() {  // Code de chargement de contenu dynamique ici});

Navigation Facilitée avec des Effets Visuels

var menuItem = document.getElementsByClassName("monMenuItemClass");

for (var i = 0; i < menuItem.length; i++) {
    menuItem[i].addEventListener("mouseover", function() {
        // Effet visuel pour faciliter la navigation
    });
}

En incorporant des écouteurs d’événements dans votre arsenal de développement, vous pouvez créer des interactions intuitives qui captivent vos utilisateurs.

L’asynchrones sur le DOM

Manipuler le DOM de manière asynchrone est une compétence indispensable pour créer des applications web fluides et réactives. Imaginez pouvoir gérer des tâches comme des requêtes réseau, des animations ou des chargements de fichiers sans jamais bloquer l’interaction de l’utilisateur avec la page. Grâce à JavaScript, plusieurs techniques permettent d’implémenter des opérations asynchrones, notamment les Promises, les callbacks et async/await.

Utilisation des Promises

Les Promises sont comme des promesses dans la vraie vie : elles représentent quelque chose qui sera fait, maintenant, plus tard, ou peut-être jamais. Voici un exemple avec une requête réseau asynchrone en utilisant les Promises :

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Mise à jour du DOM avec les données reçues
    document.getElementById('dataContainer').innerHTML = JSON.stringify(data);
  })
  .catch(error => console.error('Erreur:', error));

Async/Await

Pour ceux qui préfèrent une approche encore plus simple, la syntaxe async/await, introduite en 2017, permet d’écrire du code asynchrone comme s’il était synchrone. Voici comment vous pouvez l’utiliser :

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
    // Mise à jour du DOM avec les données reçues
    document.getElementById('dataContainer').innerHTML = JSON.stringify(data);
  } catch (error) {
    console.error('Erreur:', error);
  }
}

fetchData();

Gestion des Requêtes AJAX

Bien que fetch soit désormais la méthode recommandée pour les requêtes HTTP, vous pouvez toujours utiliser XMLHttpRequest pour la gestion asynchrone :

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    let data = JSON.parse(xhr.responseText);
    console.log(data);
    // Mise à jour du DOM avec les données reçues
    document.getElementById('dataContainer').innerHTML = JSON.stringify(data);
  }
};
xhr.send();

Sécurité et DOM

Lorsque vous manipulez le DOM, la sécurité est primordiale. Il est crucial de prendre en compte les aspects de sécurité pour éviter les vulnérabilités, notamment les attaques par injection de scripts (XSS – Cross-Site Scripting). Voici quelques conseils pour renforcer la sécurité de vos manipulations DOM :

Éviter l’Usage Imprudent de `innerHTML`

Utiliser innerHTML pour insérer du contenu dynamique peut exposer votre site à des attaques XSS. Préférez l’utilisation de textContent ou de méthodes plus sûres comme createElement et appendChild :

// Mauvaise pratique : peut mener à des attaques XSS
element.innerHTML = "<div>" + userInput + "</div>";

// Bonne pratique : utilisation de createElement et textContent
let div = document.createElement('div');
div.textContent = userInput;
element.appendChild(div);

Valider et Échapper les Entrées Utilisateurs

Assurez-vous toujours de valider et échapper les entrées des utilisateurs avant de les utiliser dans le DOM. Utilisez des bibliothèques comme DOMPurify pour nettoyer les entrées potentiellement dangereuses :

let sanitizedInput = DOMPurify.sanitize(userInput);
element.innerHTML = sanitizedInput;

Limiter les Capacités de Scripts Tiers

Soyez vigilant avec les scripts tiers que vous intégrez sur votre site. Utilisez des politiques de sécurité du contenu (CSP – Content Security Policy) pour restreindre les sources de scripts et empêcher l’exécution de scripts non autorisés :

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trustedscripts.example.com">

En appliquant ces bonnes pratiques de sécurité, vous pouvez protéger votre application web tout en profitant des fonctionnalités dynamiques du DOM. Avec ces connaissances, vous êtes maintenant prêt à créer des applications web interactives, réactives et sécurisées. Bon codage !

Comprendre les bases du DOM (Document Object Model)