1. Documentation
  2. >
  3. Modules
  4. >
  5. DOM

Module DOM

Ce module est dédié à la manipulation du DOM (Document Object Model). Il peut être utilisé indépendamment de Dynamique.

Historiquement, les fonctions qui permettaient la manipulation des événements étaient définis dans ce module. Depuis l'évolution du language et des standards la gestion des événements se fait à partir du module dédié Event.

DOM s'organise autour de 3 axes:

  • Manipulation (création, déplacement, suppression) d'élément DOM: setEvent;

  • Manipulation des classes de style: setEventByName;

  • Manipulation d'attributs et de propriétés: setEventByName.

Chacun de ces axes peut fonctionner en totale autonomie.

Accessibilité

Lorsque DOM est utilisé sans Dynamique, il s'initialise directement sur l'objet window. Il est alors accessible tel que:

DOM.addClass(...); // === window.DOM.addClass(...);

Lorsque DOM est utilisé avec Dynamique, il s'initialise en tant que module de Dynamique. Il y crée un certains nombre de plug-in dont la liste est défini au paragraphe Méthodes et Plug-in générés. Les méthodes (plug-in) du module DOM sont alors accessible tel que:

Dynamique([document.body]).addClass(...);

Pour autant, les méthodes initiales du module restent tout de même accessible en suivant le chemin jusqu'à son emplacement, tel que défini par la documentation de Dynamique:

Dynamique.module.DOM.addClass([document.body], ...);

Méthodes et Plug-in générés

Pour simplifier leur usage, une méthode est créé pour chacun des événements suivants:

Chacun de ces événements sont alors utilisable comme méthode en ajoutant la chaine on devant le nom de chacune d'entre elles:

Event.setEvent([document.body"], "click", fct...); // === Event.onClick.call([document.body], fct...);

Les avantages de cette techniques sont plus perceptibles lors de l'utilisation de Dynamique où ces méthodes sont alors ajoutées comme plug-in à Dynamique, rendant leur usage tel que:

Dynamique(document.body).onClick(fct...); Dynamique(document.body).onRightClick(fct...); Dynamique(document.body).onScroll(fct...); // === Dynamique(document.body).onClick(fct...).onRightClick(ftc...).onScroll(fct...);

Il en vas de mêmes pour les méthodes:

qui sont transformées en méthodes utilisables dans le contexte d'usage de Dynamique:

Event.saveEvent("name", fct); Event.setEvent([document.body], "click", "name"); // === Dynamique(document.body).saveEvent("name", fct).setEvent("click", "name"); // === Dynamique(document.body).saveEvent("name", fct).onClick("name");

Compatibilité

Le module Event a été réalisé sous le standard EcmaScript 6.

Dépendances

Le module Event n'a aucune dépendance externe.

Source

/Module/Event/Event.js