Meilleures pratiques pour une manipulation efficace de DOM en JavaScript

Cet article explore les meilleures pratiques pour les opérations efficaces de Dom JavaScript, visant à améliorer les performances et à réduire le risque d'erreur. DOM (Document Object Model) est une API de page Web qui permet à JavaScript d'accéder et de manipuler le contenu et la structure des documents HTML.

1. Utilisez la classe CSS au lieu du style en ligne

   Lors du style des éléments DOM, il est préférable d'utiliser des classes CSS au lieu de styles en ligne. Les cours CSS sont faciles à modifier et à réutiliser, tandis que les styles en ligne sont difficiles à gérer et à entretenir.

   par exemple, au lieu d'écrire:

   document.getElementById('button').style.backgroundColor = 'red';

   Copier après la connexion

   c'est mieux:

   .button-style {
       background-color: red;
   }

   Copier après la connexion

   Ensuite, appliquez le style comme ceci:

   let cardButton = document.getElementById('button');
   cardButton.classList.add('button-style');

   Copier après la connexion

2. Sélecteur de cache

   Le cache de sélecteur peut améliorer l'efficacité du code de fonctionnement DOM. Stockez les résultats du sélecteur par une variable de réutilisation et évitez la requête répétée du DOM.

   par exemple, au lieu d'écrire:

   document.querySelector('#button').addEventListener('click', function() {
       // do something
   });
   document.querySelector('#button').className = "enabled";

   Copier après la connexion

   c'est mieux:

   const myButton = document.querySelector('#button');
   myButton.addEventListener('click', function() {
       // do something
   });
   myButton.className = "enabled";

   Copier après la connexion

3. Utilisation de la délégation des événements

   Le délégué de l'événement fait référence à la connexion d'un écouteur d'événements à un élément parent, puis à un traitement des événements qui se produisent sur ses éléments enfants. S'il y a de nombreux éléments enfants, cela est plus efficace que d'attacher un écouteur d'événements à chaque élément enfant séparément. Les délégués d'événements peuvent également rendre le code plus concis et plus facile à entretenir.

   Exemple:

   Ici, nous ajoutons un événement de clic au conteneur parent, au lieu d'ajouter un événement de clic à chaque bouton. Dans le gestionnaire d'événements, utilisez les méthodes getElementById, querySelector ou getElementsByClassName pour sélectionner des éléments en fonction du sélecteur CSS.

4. Évitez d'utiliser innerHTML

   innerHTML Bien qu'il soit facile de manipuler les éléments DOM et HTML, il présente des risques de sécurité et est vulnérable aux attaques de script de sites croisées (XSS). De plus, lors de la mise à jour du contenu HTML dynamiquement, innerHTML est plus lent que les autres méthodes, car elle nécessite que le navigateur analyse et rende l'intégralité du contenu HTML de l'élément.

   Les méthodes alternatives incluent: textContent, appendChild().

   const newText = document.createElement('p');
   const parentElement = document.getElementById('heading');
   parentElement.appendChild(newText);

   Copier après la connexion

5. Évitez les éléments de nidification dans le sélecteur

   Dans certains cas, les éléments de nidification des sélecteurs ne sont pas les meilleures pratiques. Cela réduira la réutilisabilité du sélecteur et augmentera la difficulté de maintenance du code. Si la structure HTML change, le sélecteur peut ne plus correspondre à l'élément cible.

   par exemple, au lieu d'écrire:

   document.querySelector('#parent .child');

   Copier après la connexion

   c'est mieux:

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

   Copier après la connexion

   un autre exemple:

   // 不佳实践
   let menuHead = document.querySelector('header > nav > ul.menu');
   
   // 良好实践
   let menuHead = document.querySelector('.menu');

   Copier après la connexion

6. limiter le nombre d'opérations DOM

   Le fonctionnement

   DOM peut être lent, surtout lorsque les pages sont modifiées fréquemment. Minimisez le nombre d'opérations DOM pour optimiser les performances. Par exemple, si vous devez modifier le texte d'un paragraphe et la couleur d'arrière-plan du bouton, il est préférable de le modifier en même temps plutôt que séparément.

7. Conclusion

   Les opérations DOM efficaces sont essentielles pour créer des applications Web rapides et expérimentées. Suivre les meilleures pratiques, notamment la réduction du nombre de changements de DOM et l'utilisation des délégués d'événements, peut accélérer le code et réduire le risque de problèmes de performances. Il est également crucial de tester et d'évaluer le code pour découvrir et résoudre les problèmes.

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!