Le DOM en JavaScript

le DOM JavaScript : Le Guide Complet

dom en javascript image

 

 

Introduction au DOM

 

Le DOM (Document Object Model) est une interface de programmation en JavaScript, qui permet aux développeurs d’interagir avec les documents HTML et XML. Grâce au DOM, vous pouvez manipuler le contenu, la structure et le style d’un document web en temps réel.

 

C’est la pierre angulaire de toute manipulation dynamique sur une page web, rendant possible la création d’applications web interactives et réactives.

 

La Structure du DOM

 

Le DOM représente un document HTML sous la forme d’un arbre de nœuds. Chaque élément HTML devient un nœud dans cet arbre, permettant une hiérarchisation claire et une navigation facile. Voici un exemple simple pour illustrer cela :

 

 
 

<!DOCTYPE html>
<html>
 <head>
  <title>Document DOM</title>
 </head>
 <body>
  <h1 id="titre">Bonjour Développeur Pro, je suis le DOM !</h1>
  <p class="paragraphe">Ceci est un paragraphe.</p>
 </body>
</html>


 

Dans cet exemple, la balise <html> est la racine de l’arbre, contenant les nœuds enfants <head> et <body>, qui eux-mêmes contiennent d’autres nœuds.

 

Sélectionner des Éléments

 

Pour manipuler les éléments du DOM, il est crucial de savoir comment les sélectionner les éléments du Document. JavaScript offre plusieurs méthodes pour ce faire, les plus courantes étant getElementById, getElementsByClassName, getElementsByTagName, querySelector et querySelectorAll.

 

Par exemple en prenant le fichier HTML créer plus haut puis en appliquant ces méthodes ci dessous :

 

// Sélectionner un élément par son ID
var titre = document.getElementById('titre');

// Sélectionner des éléments par leur classe
var paragraphes = document.getElementsByClassName('paragraphe');

// Sélectionner un élément avec un sélecteur CSS
var premierParagraphe = document.querySelector('.paragraphe');


 
 

Voici comment Manipuler les Contenus

 

Une fois les éléments sélectionnés comme plus haut, vous pouvez en manipuler le contenu et les attributs. Voici quelques méthodes courantes :

 
 

// Modifier le texte d'un élément
titre.textContent = 'Bonjour, le monde de Développeur Pro !';

// Changer un attribut
premierParagraphe.setAttribute('class', 'nouvelleClasse');


 
Ici le texte dans le h1 va changer et nous ajoutons également une nouvelle classe que l’on va pouvoir stylisé dans un fichier Css dédié. Ou voir même directement avec javascript sans l’avoir au préalable écrit dans le fichier Html.
 

Ces manipulations permettent de mettre à jour le contenu d’une page en réponse à des actions de l’utilisateur, créant ainsi une expérience interactive. C’est ce que l’on verra maintenant avec :

 

Les Événements DOM

 

Les événements sont des signaux envoyés par le navigateur pour indiquer que quelque chose s’est produit. Par exemple, un utilisateur qui clique sur un bouton déclenche un événement de clic. Voici comment ajouter un écouteur d’événement :

 
 

// Sélectionner le bouton var bouton = document.querySelector('button'); // Ajouter un écouteur d'événement bouton.addEventListener('click', function() { alert('Bouton cliqué!'); });
 
Ici quand le bouton est cliqué une alert se déclenche.
Puis également comme je vous l’ai dit lus haut vous pouvez aussi :
 
 

Modifier le Style

Le DOM permet également de manipuler les styles CSS directement depuis JavaScript. Vous pouvez changer les propriétés CSS d’un élément via l’objet style :

 
 

// Changer la couleur du texte
titre.style.color = 'blue';

// Modifier la taille de la police
premierParagraphe.style.fontSize = '18px';


 

 

Comprendre et maîtriser le DOM est une compétence incontournable pour tout développeur web. Cela vous permet de créer des interfaces utilisateur dynamiques et réactives, améliorant considérablement l’expérience utilisateur.

 

Ton Guide Bonus Javascript Offert !

 

Pour aller plus loin dans ton apprentissage, je t’offre un guide exclusif sur les meilleures pratiques en JavaScript, incluant des techniques pour Javascript et travailler ton apprentissage de manière efficace et performante.

Ce guide t’apportera des astuces précieuses et des exemples concrets pour perfectionner tes compétences plus rapidement et plus simplement et te lancer rapidement en développement web.

Tu peux le recevoir dès maintenant et gratuitement accède tout de suite à ce guide bonus exceptionnel et transforme tes connaissances en une expertise reconnue de Développeur Pro !

 

Rejoignez notre Newsletter et Restez Informé !

Vous souhaitez rester à jour avec les dernières tendances et actualités du monde du développement et le métier de développeur. Comment devenir développeur pro ? Rejoignez notre newsletter pour obtenir un accès exclusif à du contenu premium, des astuces de codage, des mises à jour sur les nouvelles fonctionnalités et bien plus encore !

Avantages de l’Inscription

  • Restez Informé: Recevez des articles informatifs sur les dernières avancées et les meilleures pratiques de codage et les softkills.
  • Promos Exclusives: Accédez à des formations détaillés et à des exemples de code pour améliorer vos compétences en programmation.
  • Aperçus des Nouveautés: Soyez parmi les premiers à découvrir les nouvelles fonctionnalités et les frameworks émergents dans l’écosystème du développement FrontEnd et Backend.
  • Communauté Engagée: Rejoignez une communauté passionnée de développeurs et partagez vos idées, questions et expériences.

Comment S’Inscrire

C’est simple et rapide ! Remplissez le formulaire d’inscription avec votre adresse e-mail et cliquez sur « S’Inscrire ». Vous recevrez régulièrement notre newsletter dans votre boîte de réception.


L’inscription à notre newsletter est un moyen idéal de rester informé et de progresser dans le domaine de la programmation et du développement pour devenir un développeur professionnel ou une développeuse pro.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *