Jdm

Jdm

Classe Jdm che fornisce un framework per la manipolazione del DOM. Permette di creare un elemento DOM, aggiungerlo a un genitore, assegnargli delle classi e manipolarlo in modo ricorsivo, se richiesto. I metodi della classe sono concatenabili per facilitare le operazioni sul DOM. # INSTALLAZIONE: NPM ```bash npm install jdm_javascript_dom_manipulator ``` Esempio di utilizzo classico (da inserire prima degli script che usano JDM): ```html ``` Esempio di utilizzo di un modulo ES6 (NB: usa jdm.es.js): ```javascript import './dist/jdm.es.js'; ``` # USO ```javascript JDM('div', container, ['fooClass','barClass']) ``` # COMPARAZIONE: ## jQuery: ```javascript const $div = $('
', { class: 'foo bar' }); const $ul = $('
    '); const $li1 = $('
  • ').text('Elemento 1'); const $li2 = $('
  • ').text('Elemento 2'); const $li3 = $('
  • ').text('Elemento 3'); const $li4 = $('
  • ').text('Elemento 4'); const $li5 = $('
  • ').text('Elemento 5'); $ul.append($li1, $li2, $li3, $li4, $li5); $div.append($ul); $('body').append($div); ``` ## JavaScript puro: ```javascript const div = 'div'; div.classList.add('foo', 'bar'); const ul = document.createElement('ul'); const li1 = document.createElement('li'); li1.textContent = 'Elemento 1'; const li2 = document.createElement('li'); li2.textContent = 'Elemento 2'; const li3 = document.createElement('li'); li3.textContent = 'Elemento 3'; const li4 = document.createElement('li'); li4.textContent = 'Elemento 4'; const li5 = document.createElement('li'); li5.textContent = 'Elemento 5'; ul.append(li1, li2, li3, li4, li5); div.appendChild(ul); document.body.appendChild(div); ``` ## Jdm: ```javascript const domString = `
    • Elemento 1
    • Elemento 2
    • Elemento 3
    • Elemento 4
    • Elemento 5
    `; const div = JDM(domString, document.body); ```

Constructor

new Jdm(elementopt, parentopt, classListopt, deepopt, …argsopt) → {Jdm}

Crea una nuova istanza della classe Jdm e manipola l'elemento DOM.
Source:
Parameters:
Name Type Attributes Default Description
element HTMLElement | null <optional>
 null L'elemento DOM da manipolare. Se non specificato, verrà creato un nuovo nodo.
parent HTMLElement | null <optional>
 null Il genitore dell'elemento. Se specificato, l'elemento verrà aggiunto come figlio del genitore.
classList Array.<string> | null <optional>
 null Una lista di classi da aggiungere all'elemento. Se specificato, verranno aggiunte le classi all'elemento.
deep boolean <optional>
 true Se impostato su `true`, i figli dell'elemento verranno manipolati ricorsivamente.
args * <optional>
<repeatable>
 Altri argomenti opzionali che possono essere passati per la manipolazione del nodo.
Returns:
Type:
Jdm
- Restituisce il nodo appena creato o manipolato.
Example
const div = JDM('<div>lorem ipsum</div>', document.body, ['my-class'], true);
// Crea un nuovo div con la classe 'my-class' e lo aggiunge al body

//language=html
const domString = `
    <div class="my-class">
        <p> paragraph </p>
    </div>
    `;
JDM(domString, document.body)
// Crea un nuovo div con la classe 'my-class', un paragrafo child e lo aggiunge tutto al body

Methods

jdm_addClassList(classList) → {Jdm}

Aggiunge una o più classi CSS all'elemento DOM. Se viene fornito un array di classi, tutte le classi vengono aggiunte all'elemento. Se viene fornita una singola classe, questa viene aggiunta come unica classe.
Source:
Parameters:
Name Type Description
classList string | Array.<string> Una singola classe CSS o un array di classi CSS da aggiungere all'elemento DOM.
Returns:
Type:
Jdm
- Restituisce l'elemento DOM su cui le classi sono state aggiunte, consentendo il chaining dei metodi.
Example
const div = JDM('<div>lorem ipsum</div>', document.body)
 .jdm_addClassList('myClass'); // Aggiunge la classe "myClass" all'elemento div.

const div2 = JDM('<div>lorem ipsum</div>', document.body)
 .jdm_addClassList(['class1', 'class2']); // Aggiunge "class1" e "class2" all'elemento div2.

jdm_addEventListener(name, fnopt) → {Jdm}

Aggiunge un listener per un evento specificato sull'elemento DOM associato. Consente di eseguire una funzione di callback quando l'evento si verifica.
Source:
Parameters:
Name Type Attributes Default Description
name string Il nome dell'evento per cui aggiungere il listener (es. "click", "input", ecc.).
fn function <optional>
 () => {} La funzione di callback che viene eseguita quando l'evento si verifica. Il valore predefinito è una funzione vuota.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui è stato aggiunto l'evento, per consentire il chaining.
Example
const element = JDM('<div>Click me</div>', document.body)
 .jdm_addEventListener('click', () => {
     console.log('Click!');
 })
 .jdm_addEventListener('contextmenu', () => {
     console.log('Right Click!');
 })

jdm_addId(id) → {Jdm}

Aggiunge un attributo `id` all'elemento DOM specificato.
Source:
Parameters:
Name Type Description
id string Il valore dell'attributo `id` da impostare sull'elemento DOM.
Returns:
Type:
Jdm
- Restituisce l'elemento DOM su cui è stato impostato l'attributo `id`, consentendo il chaining dei metodi.
Example
const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_addId('myDiv'); // Imposta l'attributo id="myDiv" sull'elemento div.

jdm_append(elementList) → {Jdm}

Aggiunge uno o più elementi figli a un elemento DOM. Se viene fornita una lista di elementi, tutti gli elementi vengono aggiunti all'elemento DOM.
Source:
Parameters:
Name Type Description
elementList HTMLElement | Array.<HTMLElement> Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.
Returns:
Type:
Jdm
- Restituisce l'elemento DOM su cui gli elementi sono stati aggiunti, consentendo il chaining dei metodi.
Example
const p1 = JDM('<p>paragrafo 1</p>');
const p2 = JDM('<p>paragrafo 2</p>');
const div = JDM('<div>lorem ipsum</div>', document.body)
 .jdm_append([p1, p2]); // Aggiunge entrambi i paragrafi come figli del div.

const span = JDM('span');
div.jdm_append(span); // Aggiunge il singolo elemento span come figlio del div.

jdm_appendAfter(elementList, elementTarget) → {Jdm}

Source:
Parameters:
Name Type Description
elementList HTMLElement | Array.<HTMLElement> Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.
elementTarget HTMLElement gli elementi di element list verranno inseriti dopo questo elemento
Returns:
Type:
Jdm
- Restituisce l'elemento DOM dietro il quale sono stati inseriti gli elementList, consentendo il chaining dei metodi.
Example
const div = JDM('<div></div>', document.body);
const span1 = JDM('<span>foo</span>',div);
const span2 = JDM('<span>bar</span>');
const span3 = JDM('<span>test</span>');
span1.jdm_appendAfter([span2, span3]);
// Risultato
<div>
    <span>foo</span>
    <span>bar</span>
    <span>test</span>
</div>

jdm_appendBefore(elementList, elementTarget) → {Jdm}

Source:
Parameters:
Name Type Description
elementList HTMLElement | Array.<HTMLElement> Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.
elementTarget HTMLElement gli elementi di element list verranno inseriti prima di questo elemento
Returns:
Type:
Jdm
- Restituisce l'elemento DOM davanti al quale sono stati inseriti gli elementList, consentendo il chaining dei metodi.
Example
const div = JDM('<div></div>', document.body);
const span1 = JDM('<span>foo</span>',div);
const span2 = JDM('<span>bar</span>');
const span3 = JDM('<span>test</span>');
span1.jdm_appendBefore([span2, span3]);
// Risultato
<div>
    <span>bar</span>
    <span>test</span>
    <span>foo</span>
</div>

jdm_binding(el, eventopt, twoWayDataBindingopt) → {Jdm}

Imposta un binding di dati tra l'elemento corrente e un altro o più elementi. Questo metodo consente di sincronizzare i valori tra gli elementi DOM, abilitando il data binding unidirezionale o bidirezionale. Se un valore cambia nell'elemento sorgente (ad esempio un `input`), il valore dell'elemento di destinazione (ad esempio un altro `input` o `div`) viene aggiornato. Se il binding bidirezionale è abilitato, i cambiamenti sono sincronizzati in entrambe le direzioni.
Source:
Parameters:
Name Type Attributes Default Description
el HTMLElement | Array.<HTMLElement> L'elemento o la lista di elementi con cui si desidera stabilire il binding.
event string <optional>
 "input" Il tipo di evento da ascoltare per attivare il binding. Default è "input".
twoWayDataBinding boolean <optional>
 true Se `true`, attiva il binding bidirezionale. Se `false`, il binding sarà unidirezionale.
Returns:
Type:
Jdm
- Restituisce l'elemento DOM su cui è stato applicato il binding, consentendo il chaining dei metodi.
Example
const input = JDM('input', document.body);
 const output = JDM('input', document.body);
 input.jdm_binding(output, "input", true);
// Crea un binding unidirezionale tra l'input e l'output, che si attiva sull'evento 'change'.

jdm_bounce(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione tipo bounce al nodo (come in animate.css).
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> Bounce </div>`, document.body)
     .jdm_bounce(() => console.log('Bounce completato!'), { duration: 1000 });

jdm_clearAnimations() → {Jdm}

Rimuove tutte le animazioni attive sul nodo e ripristina lo stile iniziale.
Source:
Returns:
Type:
Jdm
- Restituisce il nodo per consentire il chaining.
Example
JDM(`<div class="foo animated"> Test </div>`, document.body)
     .jdm_clearAnimations();

jdm_destroy() → {Jdm}

Rimuove l'elemento DOM dal documento e genera un evento di distruzione. Questo metodo elimina l'elemento DOM rappresentato da `this.node` dalla struttura del documento. Inoltre, viene generato un evento personalizzato chiamato "destroy".
Source:
Returns:
Type:
Jdm
- Restituisce l'elemento DOM che è stato rimosso, consentendo il chaining dei metodi.
Example
const div = JDM('<div>lorem ipsum</div>', document.body)
 .jdm_destroy(); // Rimuove l'elemento div dal documento e genera un evento "destroy".

jdm_empty() → {Jdm}

Svuota il contenuto dell'elemento DOM. A seconda del tipo di elemento, il comportamento di "svuotamento" varia: - Per gli elementi `input` di tipo `checkbox` o `radio`, deseleziona l'elemento (imposta `checked` a `false`). - Per gli altri elementi `input` o `textarea`, imposta il valore a `null` (svuotando il campo di testo). - Per un elemento `form`, esegue il reset del modulo (ripristina tutti i campi al loro stato iniziale). - Per altri tipi di elementi, rimuove il contenuto HTML dell'elemento (imposta `innerHTML` a una stringa vuota).
Source:
Returns:
Type:
Jdm
- Restituisce l'elemento DOM su cui è stato effettuato lo svuotamento, consentendo il chaining dei metodi.
Example
const inputText = JDM('input', document.body)
 .jdm_empty(); // Imposta il valore dell'input text a null.

const checkbox = JDM('input', document.body)
 .jdm_setAttribute('type', 'checkbox')
 .jdm_empty(); // Deseleziona la checkbox.

const form = JDM('form').jdm_empty(); // Esegue il reset del modulo.

jdm_extendChildNode() → {Jdm}

Estende l'elemento corrente con i nodi figli definiti in `jdm_childNode`. Se l'elemento ha nodi figli associati a `jdm_childNode`, questi vengono aggiunti come proprietà dell'elemento stesso. ### NB:questo metodo NON funziona sui form
Source:
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
const domString = `
 <div class="foo">
     <div data-name="element1"> Element 1</div>
     <div data-name="element2"> Element 2</div>
     <div data-name="element3"> Element 3</div>
 </div>`;
 const div = JDM(domString, document.body)
  .jdm_extendChildNode();
  console.log(div.element1);
  console.log(div.element2);
  console.log(div.element3);

jdm_extendNode(name, objectopt) → {Jdm}

Estende l'elemento DOM aggiungendo una proprietà personalizzata. Questo metodo assegna un oggetto o un valore alla proprietà `name` dell'elemento DOM rappresentato da `this.node`.
Source:
Parameters:
Name Type Attributes Default Description
name string Il nome della proprietà da aggiungere all'elemento DOM.
object Object | null <optional>
 null L'oggetto o il valore da associare alla proprietà. Può essere qualsiasi tipo di valore, incluso `null`.
Returns:
Type:
Jdm
- Restituisce l'elemento DOM su cui è stata aggiunta la proprietà personalizzata, consentendo il chaining dei metodi.
Example
const div = JDM('<div>lorem ipsum</div>', document.body)
 .jdm_extendNode('customData', { id: 123, name: 'My Div' });
// Aggiunge la proprietà 'customData' all'elemento div con un oggetto come valore.
console.log(div.customData); // { id: 123, name: 'My Div' }

jdm_fadeIn(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione di fade-in sul nodo.
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeIn </div>`, document.body)
     .jdm_fadeIn(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})

jdm_fadeInDown(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione tipo fadeInDown al nodo .
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeInDown </div>`, document.body)
     .jdm_fadeInDown(() => console.log('done'), { duration: 1000, easing: 'ease-out' });

jdm_fadeInLeft(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione tipo fadeInLeft al nodo .
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeInLeft </div>`, document.body)
     .jdm_fadeInLeft(() => console.log('Fade in left concluso'), { duration: 800 });

jdm_fadeInRight(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione tipo fadeInRight al nodo .
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeInRight </div>`, document.body)
     .jdm_fadeInRight(() => console.log('Fade in right concluso'), { duration: 800 });

jdm_fadeInUp(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione tipo fadeInUp al nodo .
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeInUp </div>`, document.body)
     .jdm_fadeInUp(() => console.log('Fade in up concluso'), { duration: 800 });

jdm_fadeOut(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione di fade-out sul nodo.
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeOut </div>`, document.body)
     .jdm_fadeOut(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})

jdm_fadeOutDown(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione di fade out down sul nodo.
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeOutDown </div>`, document.body)
     .jdm_fadeOutDown(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})

jdm_fadeOutLeft(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione di fade out left sul nodo.
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeOutLeft </div>`, document.body)
     .jdm_fadeOutLeft(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})

jdm_fadeOutRight(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione di fade out right sul nodo.
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeOutRight </div>`, document.body)
     .jdm_fadeOutRight(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})

jdm_fadeOutUp(callbackFnopt, optionopt) → {Jdm}

Applica un'animazione di fade out up sul nodo.
Source:
Parameters:
Name Type Attributes Default Description
callbackFn function <optional>
 Funzione da eseguire al termine dell'animazione.
option Partial.<AnimationOption> <optional>
 new AnimationOption() Opzioni dell'animazione.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
Example
JDM(`<div class="foo"> FadeOutUp </div>`, document.body)
     .jdm_fadeOutUp(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})

jdm_findClassList(classList, someopt) → {boolean}

Permette di cercare una stringa o un array di stringhe all'interno della classe dell'elemento. Normalmente ritorna true se tutti gli elementi di classList sono presenti nella classe dell'elemento Se "some" è impostato a true cerca se sono presenti alcune classi
Source:
Parameters:
Name Type Attributes Default Description
classList string | Array.<string> Una singola classe CSS o un array di classi CSS da cercare.
some boolean <optional>
 false Parametro che permette di scegliere se la ricerca è in AND o OR
Returns:
Type:
boolean
- ritorna true o false in base alla ricerca AND o OR
Example
const div = JDM('<div class="bar foo test" >lorem ipsum</div>', document.body)
 .jdm_findClassList(["bar", "foo"]) // ritorna true perchè tutte le classi sono presenti

const div = JDM('<div class="bar foo test" >lorem ipsum</div>', document.body)
 .jdm_findClassList(["bar", "var"], true) // ritorna true perchè bar è presente nelle classi

jdm_genEvent(name, dataopt, propagateToParentsopt) → {Jdm}

Genera un evento personalizzato per l'elemento DOM associato, utilizzando il metodo di generazione evento definito nella libreria `_common`. L'evento può essere propagato ai genitori, se necessario.
Source:
Parameters:
Name Type Attributes Default Description
name string Il nome dell'evento da generare. Può essere qualsiasi stringa che rappresenta un tipo di evento personalizzato.
data Object | null <optional>
 null I dati da associare all'evento. Questi dati vengono passati come parte dell'oggetto evento. Può essere `null` se non sono necessari dati aggiuntivi.
propagateToParents boolean <optional>
 true Un valore booleano che indica se l'evento deve essere propagato ai genitori dell'elemento. Il valore predefinito è `true`.
Returns:
Type:
Jdm
- Restituisce il nodo dell'elemento su cui è stato generato l'evento, per consentire il chaining.
Example
const element = JDM('<input>', document.body)
 .jdm_addEventListener('customEvent', (event)=> {
     console.log(event.detail)
})
element.jdm_genEvent('customEvent', { message: 'Evento generato!' });

jdm_getAttribute(attribute) → {string|null}

Recupera il valore di un attributo di un elemento DOM.
Source:
Parameters:
Name Type Description
attribute string Il nome dell'attributo di cui si desidera ottenere il valore.
Returns:
Type:
string | null
- Restituisce il valore dell'attributo se esiste, altrimenti `null` se l'attributo non è presente.
Example
const div = JDM('<div>lorem ipsum</div>', document.body)
 .jdm_setAttribute('data-test', 'foo');
const dataTest = div.jdm_getAttribute('data-test')

jdm_getValue() → {any}

Ottiene il valore di un elemento DOM. A seconda del tipo di elemento, il valore verrà restituito in modo appropriato: - **Input** (checkbox, radio): restituisce il valore `checked` dell'elemento. - **Form**: restituisce un oggetto JSON con i valori di tutti i campi del modulo, supportando strutture di dati complesse come array e oggetti. - **Select**: restituisce il valore selezionato dell'elemento `