Bonjour, incroyables développeurs JavaScript ?

Les navigateurs fournissent une interface de programmation appelée Document Object Model (DOM) qui permet aux scripts (JavaScript en particulier) d'interagir avec la mise en page d'une page Web. Le modèle d'objet de document (DOM) d'une page Web, une structure hiérarchique arborescente qui organise les composants de la page en objets, est créé par le navigateur lors de son chargement. Le style, l'organisation et le contenu d'un document peuvent tous être consultés et modifiés de manière dynamique à l'aide de ce paradigme.

Utiliser le DOM pour interagir

De nombreuses opérations peuvent être effectuées sur le modèle objet de document (DOM) par JavaScript, notamment :

• Modifier le contenu des éléments HTML
• Ajout ou suppression d'éléments et d'attributs
• Répondre aux événements utilisateur tels que les clics ou les pressions sur des touches
• Créer de nouveaux événements au sein de la page

Exemple

Vous pouvez utiliser JavaScript pour modifier le contenu d'un élément en le ciblant avec la fonction document.getElementById(), puis en modifiant la propriété innerHTML de l'élément :

// Modify an element's content, access it using its ID
document.getElementById("myElement").innerHTML = "New content";

Structure du DOM

L'objet document est à la base du DOM, qui est organisé sous forme d'arborescence d'objets. Chaque élément HTML est représenté sous forme de nœud dans l'arborescence, et ces nœuds sont capables d'avoir des événements, des méthodes et des propriétés associés. En offrant des moyens de naviguer et de travailler avec ces nœuds, le DOM permet aux scripts de modifier la page en temps réel.

Voici un exemple de base de ce à quoi peut ressembler l'arborescence DOM d'un document HTML typique :

document
├── html
│ ├── head
│ │ └── title
│ └── body
│ ├── h1
│ └── p

Fonction du DOM dans le développement Web

Le DOM est essentiel au développement Web pour plusieurs raisons.

• Il permet de créer des pages Web dynamiques et interactives en permettant aux scripts de modifier le style et le contenu d'une page en réponse aux entrées de l'utilisateur.
• Il garantit l'uniformité entre les plates-formes en offrant une interface standardisée permettant aux différents navigateurs d'interagir avec et de manipuler les pages en ligne.
• Les Applications monopage (SPA) dépendent du DOM pour actualiser la page sans nécessiter de rechargement, ce qui est donc essentiel à leur fonctionnement.

Niveaux et normes DOM

Le World Wide Web Consortium (W3C) maintient la norme DOM, qui garantit sa fiabilité et sa cohérence sur différents navigateurs et systèmes Web. La norme est divisée en différentes sections et niveaux, notamment :

• Le paradigme fondamental pour tous les types de documents est * Core DOM :.
• Le modèle de document XML est appelé XML DOM.
• HTML DOM : Le modèle a été créé spécialement pour les fichiers HTML.

Des capacités et fonctionnalités supplémentaires sont ajoutées à chaque version standard du DOM, permettant des manipulations et des interactions de documents en ligne plus complexes.

Illustration réelle de la manipulation du DOM

Voici une illustration concrète de la manière dont vous pouvez communiquer avec un document HTML à l'aide du DOM :

Hello, World!
Change Header

Dans cet exemple, cliquer sur le bouton appelle la fonction changeHeader(), qui utilise le DOM pour accéder à l'élément

par son ID. Il modifie ensuite le contenu du texte et la couleur de l'en-tête.

Techniques DOM essentielles

1. Sélection de requête

Utilisez document.querySelector() pour récupérer des éléments avec une précision extrême.

Explication : querySelector() vous permet de sélectionner des éléments à l'aide de sélecteurs CSS, ce qui en fait un moyen puissant et flexible d'accéder aux éléments DOM.

Exemple

// Select the first element with class 'myClass'

const element = document.querySelector('.myClass');

// Select a specific element by ID
const header = document.querySelector('#header' );

// Select the first 
 inside a 

const paragraph = document.querySelector('div p');





  
  
  2. Contenu dynamique


Modifiez innerHTML ou textContent pour mettre à jour le contenu de la page à la volée. 

Explication : innerHTML ou textContent vous permet de modifier dynamiquement le contenu des éléments, permettant des pages Web interactives et réactives.


  
  
  Exemple




// Using innerHTML (can include HTML tags)

document.querySelector('#myDiv').innerHTML = 'New content!';

// Using textContent (plain text only, safer for user inputs)

document.querySelector('#myParagraph').textContent = 'Updated text content';





  
  
  3. Écoute d'événements


Attachez addEventListener() aux éléments pour des expériences utilisateur interactives. 

Explication : addEventListener() vous permet de répondre aux actions de l'utilisateur telles que des clics, des pressions sur des touches ou des mouvements de souris, créant ainsi des applications Web interactives.


  
  
  Exemple




const button = document.querySelector('#myButton' );

button. addEventListener( 'click', function( ) {
     alert( 'Button clicked!')
});

// Using arrow function
document.addEventListener('keydown', (event) => {
     console. log( 'Key pressed:', event.key);
});





  
  
  4. Traversée du DOM


Naviguez dans l'arborescence DOM avec les propriétés parentNode, children et siblings. 

Explication : DOM Traversal vous permet de vous déplacer dans la structure du document, en accédant aux éléments associés en fonction de leur position dans l'arborescence DOM.


  
  
  Exemple




const child = document.querySelector('#childElement');

// Access parent
const parent = child.parentNode;

// Access siblings
const nextSibling = child.nextElementSibling;
const prevSibling = child.previousElementSibling;

// Access children
const firstChild = parent.firstElementChild;
const allChildren = parent.children;





  
  
  Conclusion


Le DOM est un outil puissant en JavaScript qui permet aux développeurs de créer des expériences Web riches et interactives. En comprenant et en utilisant le DOM, les développeurs peuvent contrôler le comportement et l'apparence des pages Web, les rendant plus attrayantes et plus réactives aux interactions des utilisateurs.