Sebastien/GSDom
1
1
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity
Files
82ecdc5fb24d62ce5b19f4c7e8f4fb57557c903a
GSDom/DOCUMENTATION.md

12 KiB
Raw Blame History

Table of Contents

GSDom

La classe GSDom est une classe écrite en pur Javascript qui permet de simplifier la manipulation du DOM.

Parameters

  • selector (String | HTMLElement) Sélecteur utilisé ou un élément du DOM (scope est alors ignoré)
  • scope (String | HTMLElement) Sélecteur utilisé (le 1er élément trouvé est utilisé) ou un élément du DOM (optional, default document)

Examples

// Ajout d'une classe `my_class` à tous les `a`
$_("a").addClass("my_class");

// Ajout d'une classe `my_class` à tous les `a` enfants de `div#main`
$_("a", "div#main").addClass("my_class");

// Ajout d'une classe `my_class` à tous les `a` enfants de l'élément `my_scope` du DOM
let my_scope = document.querySelector("div#main");
$_("a", my_scope).addClass("my_class");

// Instanciation de GSDom avec un élément du DOM et ajout d'une classe `my_class` à cet élément
let element = document.querySelector("p#intro");
$_(element).addClass("my_class");

each

Parcours de tous les éléments sélectionnés

Parameters

Examples

//appliquer une fonction sur tous les éléments ayant `my_class`
$_(".my_class").each((item, index) => {
 // Do something with item et index
});

addClass

Ajout d'une classe aux éléments sélectionnés

Parameters

  • className String Le nom de la classe à ajouter

Examples

$_("p","div#main").addClass("my_class");

Returns this Chainage

removeClass

Suppression d'une classe aux éléments sélectionnés

Parameters

  • className String Le nom de la classe à ajouter

Examples

$_("p","div#main").removeClass("my_class");

Returns this Chainage

removeAllClasses

Suppression de toutes les classes des éléments sélectionnés

Examples

$_("p","div#main").removeAllClasses("myClass");

Returns this Chainage

replaceClass

Remplace une classe par une autre parmi les éléments sélectionnés

Parameters

  • oldClass String Nom de la classe à remplacer
  • newClass String Nom de la classe de remplacement

Examples

$_("p","div#main").replaceClass("my_old_class", "my_new_class");

Returns this Chainage

setAttr

Définit un attribut et sa valeur

Parameters

  • attr String Nom de l'attribut
  • value String Valeur de l'attribut

Examples

$_("input.my_class").setAttr("readonly", "");

Returns this Chainage

delAttr

Supprime un attribut dans les éléments sélectionnés

Parameters

  • attr String Nom de l'attribut à supprimer

Examples

$_(input.my_class).delAttr("readonly");

Returns this Chainage

setHidden

Ajoute l'attribut hidden aux éléments sélectionnés

Examples

$_("span.my_class").setHidden();

Returns this Chainage

setReadOnly

Ajoute l'attribut readonly aux éléments sélectionnés

Examples

$_("input.my_class").setReadOnly();

Returns this Chainage

setDisabled

Ajoute l'attribut disabled aux éléments sélectionnés

Examples

$_("input.my_class").setDisabled();

Returns this Chainage

delHidden

Supprime l'attribut hidden aux éléments sélectionnés

Examples

$_("span.my_class").delHidden();

Returns this Chainage

delReadOnly

Supprime l'attribut readonly aux éléments sélectionnés

Examples

$_("input.my_class").delReadOnly();

Returns this Chainage

delDisabled

Supprime l'attribut disabled aux éléments sélectionnés

Examples

$_("input.my_class").delDisabled();

Returns this Chainage

toggleHidden

switche l'attribut hidden des éléments sélectionnés

Examples

$_("span.my_class").toggleHidden();

Returns this Chainage

toggleReadOnly

switche l'attribut readonly des éléments sélectionnés

Examples

$_("input.my_class").toggleReadOnly();

Returns this Chainage

toggleDisabled

switche l'attribut disabled des éléments sélectionnés

Examples

$_("input.my_class").toggleDisabled();

Returns this Chainage

on

Ajoute un gestionnaire d'événement aux éléments sélectionnés

Parameters

  • type String Nom de l'événement
  • callback evtCallback Gestionnaire de l'événement
  • useCapture Boolean Propagation de l'événement

Examples

$_("button#event").on("mouseover", (evt, el) => {
 // Do something with evt and el
}, false);

onClick

Ajout d'un gestionnaire d'événement 'click' pour les éléments sélectionnés

Parameters

  • callback evtCallback Gestionnaire de l'événement
  • useCapture Boolean Propagation de l'événement

Examples

$_("button#event").onClick( (evt, el) => {
 // Do something with evt and el
}, false);

found

Retourne si un élément a été trouvé

Examples

let found = $_("#main").found();

Returns Boolean true si un élément au moins du DOM trouvé. false sinon

first

Retourne le premier élément trouvé

Parameters

  • isHTMLElement Boolean true pour obtenir un élément du DOM, false pour un Objet GSDom (optional, default false)

Examples

let htmlElement = $_("p.paragraphe").first(true);

$_("input.my_class").first().setDisabled();

Returns HTMLElement l'élément du DOM trouvé

last

Retourne le dernier élément trouvé

Parameters

  • isHTMLElement Boolean true pour obtenir un élément du DOM, false pour un Objet GSDom (optional, default false)

Examples

let htmlElement = $_("p.paragraphe").last(true);

$_("input.my_class").last().setDisabled();

Returns (GSDom | HTMLElement) L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage

items

Retourne un tableau des éléments du Dom sélectionnés

Examples

let my_HTMLElements = $_("p.my_class").items();

Returns Array<HTMLElement> les éléments du DOM sélectionnés

count

Retourne le nombre d'éléments du DOM sélectionnés

Examples

let count = $_("p.my_class").count();

itemAtIndex

Retourne l'élément à l'index index parmi les éléments sélectionnés;

Parameters

  • index Number Index de l'élément souhaité
  • isHTMLElement Boolean true pour obtenir un élément du DOM, false pour un Objet GSDom (optional, default false)

Examples

let htmlElement = $_("p.paragraphe").itemAtIndex(2,true);

$_("input.my_class").itemAtIndex(2).setDisabled();

Returns (GSDom | HTMLElement) L'élément du DOM trouvé ou un Objet GSDom correspondant pour chainage

version

Retourne la version de la bibliothèque

Parameters

  • long Boolean true pour obtenir la version longue

Returns String Le numéro de version

eachCallback

Fonction de rappel la méthode each()

Type: Function

Parameters

  • element HTMLElement L'élément du DOM concerné
  • index number L'index de l'élément

evtCallback

Fonction de rappel des méthodes on() et onClick()

Type: Function

Parameters

  • evt Event L'événement qui s'est produit
  • item HTMLElement L'élément du DOM concerné par lévénement