Dynamique.js - Documentation Dynamique

Version:
Dernière mise à jour le 28/08/2018.

Dynamique

Sélectionne ou crée des éléments DOM et les retourne dans un tableau, étendue des greffons définis par Dynamique.extendWith ou l'ensemble des greffons existant dans Dynamique.plugin.

La propriété context lui est également associée. Elle représente le contexte englobant this utilisé lors de l'appel de Dynamique.

Synthaxe


					Dynamique(strSearch[, ...arg]);

					Dynamique(domDesc[, ...arg]);

					Dynamique(arr);

Où:

strSearch : chaine de caractère décrivant une séquence permettant la sélection d'élément DOM. Cette chaine ainsi que les arguments suivants ...arg seront fournies à la méthode Dynamique.selector.
domDesc : objet décrivant un élément DOM. Cet objet ainsi que les arguments suivants ...arg seront fournies à la méthode Dynamique.domCreator.
arr : si un tableau est fourni, il sera étendue des greffons puis retournés.

Valeur de retour

Un tableau contenant les éléments DOM sélectionnés ou créés, étendue des greffons définis par Dynamique.extendWith ou ceux existant dans Dynamique.plugin.

Contexte de création

Lorsqu'une sélection ou création d'éléments DOM est réalisé, la propriété context lui est toujours associée. La valeur de cette propriété est le contexte englobant this qui a été utilisé lors de l'appel de Dynamique.

Exemples

Exemple 1: Sélection d'éléments DOM

L'exemple ci-dessous appelle Dynamique.selector afin de sélectionner les éléments DOM correspondant à la séquence "a:visited".


						const elem = Dynamique("a:visited");
						
						// elem contiendra dans un tableau l'ensemble des liens visités du document
						// ce tableau sera également constitué des greffons précédemments ajoutés à Dynamique

Exemple 2: Création d'éléments DOM

L'exemple ci-dessous appelle Dynamique.domCreator afin de créer des éléments DOM puisque le premier argument est un objet.


						const elem = Dynamique({
							tagName : "h1",
							textContent : "Ceci est un titre"
						});
						
						// elem est un tableau contenant uniquement un élément titre "h1"
						// ainsi que les greffons précédemments ajoutés à Dynamique

Exemple 3: Récupération du contexte

L'équivalent du premier exemple utilisant la syntaxe supportant les objets est présenté ci-dessous.


						const elem = Dynamique("body");
						
						// elem.context = undefined; pas de contexte
						
						const p = elem.selector("p");
						
						//p.context = elem;

Compatibilité

Réalisé sous le standard EcmaScript 6.