Les bases de la manipulation de Dom dans Javascript de vanille (pas de jQuery)

Cet article, qui fait partie de notre Anthologie JavaScript moderne , explore les capacités de Vanilla JavaScript pour la manipulation de Dom, démontrant qu'il s'agit d'une alternative robuste à jQuery. Accédez à l'anthologie complète via SitePoint Premium.

Bien que JQuery soit souvent le go-to pour la manipulation DOM, Vanilla JavaScript offre des méthodes natives efficaces. Cet article couvre les tâches clés de manipulation DOM: interroger et modifier le DOM, gérer les cours et attributs, la manipulation des événements et l'animation. Enfin, nous allons construire une bibliothèque DOM personnalisée légère.

Prise des clés:

• Vanilla JavaScript fournit des outils de manipulation DOM puissants, particulièrement pertinents avec une diminution du support IE.
• .querySelector() et .querySelectorAll() offrent une sélection d'éléments efficace; Le premier renvoie le premier match, tandis que le second renvoie tous les matchs en tant que nodelist.
• Modifier les classes et attributs des éléments directement à l'aide de méthodes .classList et .setAttribute(), en comprenant les implications de performance de la manipulation des attributs DOM versus HTML.
• Utiliser .addEventListener() pour la gestion des événements, permettant à plusieurs écouteurs de différents types sur un seul élément, offrant plus de flexibilité que .onclick.
• Améliorer les performances et la clarté du code en créant des fonctions d'assistance ou des mini-bibliothèques pour gérer les tâches DOM répétitives, reproduisant la commodité de JQuery à l'aide de javascript natif.

DOM Manipulation: interroger le dom

(Remarque: Cet article fournit un aperçu de haut niveau de l'API Vanilla Dom. Pour plus de détails, reportez-vous au réseau de développeurs Mozilla.)

Utiliser .querySelector() avec les sélecteurs CSS pour cibler les éléments:

const myElement = document.querySelector('#foo > div.bar');

Cela sélectionne le premier élément correspondant. .matches() vérifie si un élément correspond à un sélecteur:

myElement.matches('div.bar') === true;

.querySelectorAll() récupère tous les éléments correspondants:

const myElements = document.querySelectorAll('.bar');

La requête dans un élément parent améliore les performances:

const myChildElement = myElement.querySelector('input[type="submit"]');

Contrairement aux collections en direct à partir de méthodes comme getElementsByTagName(), .querySelectorAll() Renvoie un nodeliste statique, qui ne se met pas à jour dynamiquement. Cela a un impact sur les performances et nécessite une itération explicite.

Travailler avec les nodelists

.querySelectorAll() Renvoie un nodeliste, pas un tableau. Convertissez-le en un tableau pour les méthodes de tableau standard:

const myElement = document.querySelector('#foo > div.bar');

Les propriétés nodelist comme children, firstElementChild, nextElementSibling, etc., offrent un accès pratique aux nœuds connexes. N'oubliez pas que childNodes comprend tous les types de nœuds, pas seulement les éléments. Utilisez nodeType ou instanceof pour vérifier les types de nœuds.

Modification des classes et attributs

Utiliser .classList Méthodes pour la manipulation efficace des classes:

myElement.matches('div.bar') === true;

Accès et modifier directement les propriétés des éléments:

const myElements = document.querySelectorAll('.bar');

.getAttribute(), .setAttribute(), et .removeAttribute() Modifiez directement les attributs HTML, déclenchant des redesrures du navigateur. Utilisez-les avec parcimonie, principalement pour les attributs dépourvus d'équivalents de propriété DOM ou lorsqu'ils persistent des changements entre les opérations comme le clonage.

Ajout de styles CSS

Appliquer des styles à l'aide de noms de propriétés à camel:

const myChildElement = myElement.querySelector('input[type="submit"]');

.window.getComputedStyle() récupère les valeurs de style calculées:

Array.from(myElements).forEach(doSomethingWithEachElement);

Modification du Dom

Utiliser appendChild(), insertBefore() et removeChild() pour la manipulation des éléments. cloneNode() crée des copies; Utilisez l'argument booléen pour le clonage profond. Créez de nouveaux éléments avec createElement() et des nœuds de texte avec createTextNode().

Propriétés des éléments: innerhtml et textContent

.innerHTML et .textContent Gérer le contenu HTML et en texte brut, respectivement. La modification .innerHTML remplace entièrement le contenu; L'ajout de l'utilisation .innerHTML = est moins efficace que les nœuds individuels en ajoutant. Utilisez DocumentFragment pour optimiser plusieurs touches.

écouter les événements

Préférez .addEventListener() sur l'attribution directe aux propriétés d'événements (par exemple, onclick) pour la flexibilité et plusieurs auditeurs. Utilisez event.target pour accéder à l'élément déclenché. .preventDefault() empêche les actions par défaut; .stopPropagation() arrête l'événement bouillonnant. Le troisième argument facultatif à addEventListener() fournit des options de configuration (capture, once, passive). La délégation d'événements améliore l'efficacité et gère les éléments ajoutés dynamiquement.

Animation

Utiliser requestAnimationFrame() pour les animations lisses, en évitant la mise en page.

Écriture de vos propres méthodes d'assistance

Créer des fonctions d'assistance personnalisées pour rationaliser la manipulation DOM, reflétant la commodité de JQuery. Cet exemple montre une fonction personnalisée de base $:

myElement.classList.add('foo');
myElement.classList.remove('bar');
myElement.classList.toggle('baz');

Cela permet un code plus concis tout en conservant les avantages de la vanille JavaScript.

Conclusion

Vanilla JavaScript offre des capacités de manipulation DOM robustes, éliminant souvent le besoin de bibliothèques externes. Bien que certains aspects puissent nécessiter plus de code verbeux que jQuery, la création de fonctions d'assistance personnalisées peut combler cet écart, permettant une manipulation DOM efficace et propre. Le choix dépend des besoins du projet et des préférences des développeurs.

(Section FAQS omise par la brièveté, mais les informations fournies dans l'entrée sont déjà couvertes ci-dessus.)

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!