Maîtriser la manipulation du DOM en JavaScript : un guide complet

Manipulation du DOM en JavaScript

La

Manipulation DOM est un aspect fondamental du développement Web moderne qui permet aux développeurs de modifier dynamiquement le contenu, la structure et le style des pages Web. Le modèle objet de document (DOM) représente la structure HTML d'une page Web dans un format arborescent.

---

1. Qu'est-ce que le DOM ?

Le DOM est une interface fournie par les navigateurs qui permet à JavaScript d'interagir avec HTML et CSS. Il représente la page comme un arbre de nœuds, où chaque élément, attribut ou texte est un nœud.

Exemple:

Pour le HTML ci-dessous :

<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>

C. Utilisation de querySelectorAll

Sélectionnez tous les éléments correspondants en tant que NodeList.

const allParagraphs = document.querySelectorAll("p");
console.log(allParagraphs); // Output: NodeList of <p> elements

---

3. Modification des éléments DOM

A. Changer le contenu

Utilisez les propriétés textContent ou innerHTML pour modifier le contenu.

const paragraph = document.querySelector("p");
paragraph.textContent = "Hello, JavaScript!";
// Changes <p>Hello, World!</p> to <p>Hello, JavaScript!</p>

B. Changer les attributs

Utilisez l'attribution de propriété setAttribute ou directe.

const image = document.querySelector("img");
image.setAttribute("src", "new-image.jpg");
image.alt = "A descriptive text";

C. Changer de style

Modifiez la propriété de style pour appliquer des styles en ligne.

const container = document.getElementById("container");
container.style.backgroundColor = "lightblue";
container.style.padding = "20px";

---

4. Ajout et suppression d'éléments

A. Créer de nouveaux éléments

Utilisez la méthode createElement.

const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

B. Supprimer des éléments

Utilisez la méthode Remove ou RemoveChild.

const paragraph = document.querySelector("p");
paragraph.remove(); // Removes the paragraph from the DOM

---

5. Ajout d'écouteurs d'événements aux éléments

Vous pouvez ajouter de l'interactivité aux éléments à l'aide d'écouteurs d'événements.

const button = document.createElement("button");
button.textContent = "Click Me";

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

document.body.appendChild(button);

---

6. Traverser les DOM

Naviguez à travers les éléments parents, enfants et frères et sœurs.

A. Parent et enfants

const child = document.querySelector("p");
const parent = child.parentElement;
console.log(parent); // Output: Parent element of <p>

const children = parent.children;
console.log(children); // Output: HTMLCollection of child elements

B. Frères et sœurs

const sibling = child.nextElementSibling;
console.log(sibling); // Output: Next sibling element

---

7. Optimisation des performances

1. Utilisez documentFragment pour les mises à jour par lots : Minimisez les redistributions et les repeints en regroupant les mises à jour DOM.

   const fragment = document.createDocumentFragment();
   for (let i = 0; i < 5; i++) {
     const li = document.createElement("li");
     li.textContent = `Item ${i + 1}`;
     fragment.appendChild(li);
   }
   document.querySelector("ul").appendChild(fragment);

1. Minimiser la manipulation directe du DOM :
   Mettez en cache les éléments et modifiez-les en masse.

2. Utiliser les bibliothèques DOM virtuelles :
   Pour les applications complexes, pensez aux bibliothèques comme React ou Vue.

---

8. Exemple pratique : liste de tâches

<div>



<p>The DOM structure looks like this:</p>

<ul>
<li>Document

<ul>
<li>HTML</li>
<li>Body

<ul>
<li>Div (id="container")</li>
<li>Paragraph ("Hello, World!")</li>
</ul>


</li>

</ul>

</li>

</ul>


<hr>

<h3>
  
  
  <strong>2. Selecting DOM Elements</strong>
</h3>

<h4>
  
  
  <strong>A. Using getElementById</strong>
</h4>

<p>Select an element by its ID.<br>
</p>

<pre class="brush:php;toolbar:false">const container = document.getElementById("container");
console.log(container); // Output: <div>



<h4>
  
  
  <strong>B. Using querySelector</strong>
</h4>

<p>Select the first matching element.<br>
</p>

<pre class="brush:php;toolbar:false">const paragraph = document.querySelector("p");
console.log(paragraph); // Output: <p>Hello, World!</p>

---

9. Résumé

• La manipulation DOM permet aux développeurs de modifier dynamiquement les pages Web.
• Utilisez des méthodes telles que getElementById, querySelector et createElement pour une manipulation efficace.
• Réduisez la manipulation directe du DOM pour de meilleures performances.

La maîtrise de la manipulation DOM est essentielle pour créer des applications Web dynamiques, interactives et conviviales.

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!