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);`Kind: global class * Jdm * [new Jdm([element], [parent], [classList], [deep], [...args])](#new_Jdm_new) * [.jdm_setAttribute(attribute, [value])](#Jdm+jdm_setAttribute) ⇒ Jdm * .jdm_getAttribute(attribute) ⇒ string \| null * .jdm_append(elementList) ⇒ Jdm * .jdm_prepend(elementList) ⇒ Jdm * .jdm_appendBefore(elementList, elementTarget) ⇒ Jdm * .jdm_appendAfter(elementList, elementTarget) ⇒ Jdm * .jdm_addId(id) ⇒ Jdm * .jdm_addClassList(classList) ⇒ Jdm * .jdm_removeClassList(classList) ⇒ Jdm * .jdm_toggleClassList(classList) ⇒ Jdm * [.jdm_findClassList(classList, [some])](#Jdm+jdm_findClassList) ⇒ boolean * .jdm_empty() ⇒ Jdm * .jdm_destroy() ⇒ Jdm * .jdm_validate() ⇒ Jdm * .jdm_removeAttribute(attribute) ⇒ Jdm * .jdm_setStyle(style, value) ⇒ Jdm * [.jdm_extendNode(name, [object])](#Jdm+jdm_extendNode) ⇒ Jdm * .jdm_innerHTML(value) ⇒ Jdm * [.jdm_binding(el, [event], [twoWayDataBinding])](#Jdm+jdm_binding) ⇒ Jdm * [.jdm_onInput([fn])](#Jdm+jdm_onInput) ⇒ Jdm * [.jdm_onChange([fn])](#Jdm+jdm_onChange) ⇒ Jdm * [.jdm_onSelect([fn])](#Jdm+jdm_onSelect) ⇒ Jdm * [.jdm_onDebounce([fn], [timeout])](#Jdm+jdm_onDebounce) ⇒ Jdm * [.jdm_onClick([fn])](#Jdm+jdm_onClick) ⇒ Jdm * [.jdm_onRightClick([fn])](#Jdm+jdm_onRightClick) ⇒ Jdm * [.jdm_onDoubleClick([fn])](#Jdm+jdm_onDoubleClick) ⇒ Jdm * [.jdm_onInvalid([fn])](#Jdm+jdm_onInvalid) ⇒ Jdm * [.jdm_onLoad([fn])](#Jdm+jdm_onLoad) ⇒ Jdm * [.jdm_onError([fn])](#Jdm+jdm_onError) ⇒ Jdm * [.jdm_onSubmit([fn])](#Jdm+jdm_onSubmit) ⇒ Jdm * [.jdm_setValue(value, [tooBoolean])](#Jdm+jdm_setValue) ⇒ Jdm * .jdm_getValue() ⇒ any * [.jdm_genEvent(name, [data], [propagateToParents])](#Jdm+jdm_genEvent) ⇒ Jdm * [.jdm_addEventListener(name, [fn])](#Jdm+jdm_addEventListener) ⇒ Jdm * [.jdm_removeEventListener(name, [fn])](#Jdm+jdm_removeEventListener) ⇒ Jdm * .jdm_extendChildNode() ⇒ Jdm * .jdm_clearAnimations() ⇒ Jdm * [.jdm_fadeIn([callbackFn], [option])](#Jdm+jdm_fadeIn) ⇒ Jdm * [.jdm_fadeInDown([callbackFn], [option])](#Jdm+jdm_fadeInDown) ⇒ Jdm * [.jdm_fadeInUp([callbackFn], [option])](#Jdm+jdm_fadeInUp) ⇒ Jdm * [.jdm_fadeInLeft([callbackFn], [option])](#Jdm+jdm_fadeInLeft) ⇒ Jdm * [.jdm_fadeInRight([callbackFn], [option])](#Jdm+jdm_fadeInRight) ⇒ Jdm * [.jdm_fadeOut([callbackFn], [option])](#Jdm+jdm_fadeOut) ⇒ Jdm * [.jdm_fadeOutRight([callbackFn], [option])](#Jdm+jdm_fadeOutRight) ⇒ Jdm * [.jdm_fadeOutUp([callbackFn], [option])](#Jdm+jdm_fadeOutUp) ⇒ Jdm * [.jdm_fadeOutDown([callbackFn], [option])](#Jdm+jdm_fadeOutDown) ⇒ Jdm * [.jdm_fadeOutLeft([callbackFn], [option])](#Jdm+jdm_fadeOutLeft) ⇒ Jdm * [.jdm_bounce([callbackFn], [option])](#Jdm+jdm_bounce) ⇒ Jdm * [.jdm_tada([callbackFn], [option])](#Jdm+jdm_tada) ⇒ Jdm * [.jdm_zoomIn([callbackFn], [option])](#Jdm+jdm_zoomIn) ⇒ Jdm * [.jdm_zoomOut([callbackFn], [option])](#Jdm+jdm_zoomOut) ⇒ Jdm * [.jdm_rotation([callbackFn], [deg], [option])](#Jdm+jdm_rotation) ⇒ Jdm $3 Crea una nuova istanza della classe Jdm e manipola l'elemento DOM. Returns: Jdm - - Restituisce il nodo appena creato o manipolato.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [element] | HTMLElement \| null | | L'elemento DOM da manipolare. Se non specificato, verrà creato un nuovo nodo. | | [parent] | HTMLElement \| null | | Il genitore dell'elemento. Se specificato, l'elemento verrà aggiunto come figlio del genitore. | | [classList] | Array.<string> \| null | | Una lista di classi da aggiungere all'elemento. Se specificato, verranno aggiunte le classi all'elemento. | | [deep] | boolean | true | Se impostato sutrue, i figli dell'elemento verranno manipolati ricorsivamente. | | [...args] | \* | | Altri argomenti opzionali che possono essere passati per la manipolazione del nodo. |
Example`js const div = JDM('
lorem ipsum
', document.body, ['my-class'], true); // Crea un nuovo div con la classe 'my-class' e lo aggiunge al body
//language=html const domString =

paragraph

; JDM(domString, document.body) // Crea un nuovo div con la classe 'my-class', un paragrafo child e lo aggiunge tutto al body`$3 Imposta un attributo su un elemento DOM e genera un evento personalizzato per il cambiamento. Kind: instance method of Jdm Chainable Returns: Jdm - - Restituisce l'elemento DOM su cui l'attributo è stato impostato, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | attribute | string | | Il nome dell'attributo da impostare sull'elemento DOM. | | [value] | string \| null | null | Il valore dell'attributo. Se non fornito, l'attributo sarà impostato sunull. |
Example`js const div = JDM('
lorem ipsum
', document.body) .jdm_setAttribute('id', 'myDiv') .jdm_setAttribute('data-test', 'foo') .jdm_setAttribute('counter', 1);`$3 Recupera il valore di un attributo di un elemento DOM.
Kind: instance method of Jdm Returns: string \| null - - Restituisce il valore dell'attributo se esiste, altrimentinull se l'attributo non è presente.
| Param | Type | Description | | --- | --- | --- | | attribute | string | Il nome dell'attributo di cui si desidera ottenere il valore. |
Example`js const div = JDM('
lorem ipsum
', document.body) .jdm_setAttribute('data-test', 'foo'); const dataTest = div.jdm_getAttribute('data-test')`$3 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. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui gli elementi sono stati aggiunti, consentendo il chaining dei metodi. | Param | Type | Description | | --- | --- | --- | | elementList | HTMLElement \| Array.<HTMLElement> | Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli. |
Example`js const p1 = JDM('
paragrafo 1
'); const p2 = JDM('paragrafo 2 '); const div = JDM('lorem ipsum ', 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.`
$3
Aggiunge uno o più elementi figli a un elemento DOM. Se viene fornita una lista di elementi, tutti gli elementi vengono aggiunti come figli dell'elemento. Se viene fornito un singolo elemento, questo viene aggiunto come unico figlio. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui gli elementi sono stati aggiunti, consentendo il chaining dei metodi. | Param | Type | Description | | --- | --- | --- | | elementList | HTMLElement \| Array.<HTMLElement> | Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli. |
Example`js const div = JDM('
paragrafo
', document.body); const span = JDM('foo'); div.jdm_prepend(span); // Risultato foo paragrafo`$3 Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM davanti al quale sono stati inseriti gli elementList, consentendo il chaining dei metodi. | Param | 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 |
Example`js const div = JDM('
', document.body); const span1 = JDM('foo',div); const span2 = JDM('bar'); const span3 = JDM('test'); span1.jdm_appendBefore([span2, span3]); // Risultato bar test foo`$3 Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM dietro il quale sono stati inseriti gli elementList, consentendo il chaining dei metodi. | Param | 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 |
Example`js const div = JDM('
', document.body); const span1 = JDM('foo',div); const span2 = JDM('bar'); const span3 = JDM('test'); span1.jdm_appendAfter([span2, span3]); // Risultato foo bar test`$3 Aggiunge un attributoid all'elemento DOM specificato.
Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato impostato l'attributoid, consentendo il chaining dei metodi.
| Param | Type | Description | | --- | --- | --- | | id | string | Il valore dell'attributoid da impostare sull'elemento DOM. |
Example`js const div = JDM('
lorem ipsum
', document.body) .jdm_addId('myDiv'); // Imposta l'attributo id="myDiv" sull'elemento div.`$3 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. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui le classi sono state aggiunte, consentendo il chaining dei metodi. | Param | Type | Description | | --- | --- | --- | | classList | string \| Array.<string> | Una singola classe CSS o un array di classi CSS da aggiungere all'elemento DOM. |
Example`js const div = JDM('
lorem ipsum
', document.body) .jdm_addClassList('myClass'); // Aggiunge la classe "myClass" all'elemento div. const div2 = JDM(' lorem ipsum ', document.body) .jdm_addClassList(['class1', 'class2']); // Aggiunge "class1" e "class2" all'elemento div2.`$3 Rimuove una o più classi CSS dall'elemento DOM. Se viene fornito un array di classi, tutte le classi vengono rimosse dall'elemento. Se viene fornita una singola classe, questa viene rimossa. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui le classi sono state rimosse, consentendo il chaining dei metodi. | Param | Type | Description | | --- | --- | --- | | classList | string \| Array.<string> | Una singola classe CSS o un array di classi CSS da rimuovere dall'elemento DOM. |
Example`js JDM('
', document.body) .jdm_removeClassList('myClass'); // Rimuove la classe "myClass" dall'elemento. JDM(' ', document.body) .jdm_removeClassList(['foo', 'bar']); // Rimuove "foo" e "bar" dall'elemento.`$3 Attiva o disattiva una o più classi CSS su un elemento DOM. Se viene fornito un array di classi, ciascuna classe verrà alternata (aggiunta se non presente, rimossa se presente). Se viene fornita una singola classe, questa verrà alternata. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui le classi sono state alternate, consentendo il chaining dei metodi. | Param | Type | Description | | --- | --- | --- | | classList | string \| Array.<string> | Una singola classe CSS o un array di classi CSS da alternare sull'elemento DOM. |
Example`js const div = JDM('
lorem ipsum
', document.body) .jdm_toggleClassList('active'); // Alterna la classe "active" sull'elemento div. const div2 = JDM(' lorem ipsum ', document.body) .jdm_toggleClassList(['class1', 'class2']); // Alterna le classi "class1" e "class2" sull'elemento div2.`$3 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 Kind: instance method of Jdm Returns: boolean - - ritorna true o false in base alla ricerca AND o OR | Param | Type | Default | Description | | --- | --- | --- | --- | | classList | string \| Array.<string> | | Una singola classe CSS o un array di classi CSS da cercare. | | [some] | boolean | false | Parametro che permette di scegliere se la ricerca è in AND o OR |
Example`js const div = JDM('
lorem ipsum
', document.body) .jdm_findClassList(["bar", "foo"]) // ritorna true perchè tutte le classi sono presenti const div = JDM(' lorem ipsum ', document.body) .jdm_findClassList(["bar", "var"], true) // ritorna true perchè bar è presente nelle classi`$3 Svuota il contenuto dell'elemento DOM. A seconda del tipo di elemento, il comportamento di "svuotamento" varia: - Per gli elementiinput di tipo checkbox o radio, deseleziona l'elemento (imposta checked a false). - Per gli altri elementiinput o textarea, imposta il valore a null(svuotando il campo di testo). - Per un elementoform, esegue il reset del modulo (ripristina tutti i campi al loro stato iniziale). - Per altri tipi di elementi, rimuove il contenuto HTML dell'elemento (impostainnerHTML a una stringa vuota).
Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato effettuato lo svuotamento, consentendo il chaining dei metodi. Example`js 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.`
$3
Rimuove l'elemento DOM dal documento e genera un evento di distruzione. Questo metodo elimina l'elemento DOM rappresentato dathis.nodedalla struttura del documento. Inoltre, viene generato un evento personalizzato chiamato "destroy".
Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM che è stato rimosso, consentendo il chaining dei metodi. Example`js const div = JDM('
lorem ipsum
', document.body) .jdm_destroy(); // Rimuove l'elemento div dal documento e genera un evento "destroy".`$3 Verifica la validità dell'elementoinput o formsecondo le regole di validazione HTML. Dopo la verifica, viene generato un evento personalizzato chiamato "validate", che segnala il risultato della validazione.
Kind: instance method of Jdm Returns: Jdm - L'elemento DOM su cui è stata effettuata la validazione, consentendo il chaining dei metodi. Example`js JDM('input', document.body) .jdm_setAttribute('required', 'true') .jdm_validate(); // Verifica la validità dell'input e genera l'evento "validate".`
$3
Rimuove un attributo dall'elemento DOM e genera un evento di rimozione dell'attributo. Questo metodo rimuove l'attributo specificato dall'elemento DOM rappresentato dathis.node. Inoltre, viene generato un evento personalizzato chiamato "removeAttribute" con il nome dell'attributo rimosso. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui l'attributo è stato rimosso, consentendo il chaining dei metodi. | Param | Type | Description | | --- | --- | --- | | attribute | string | Il nome dell'attributo da rimuovere dall'elemento DOM. |
Example`js JDM('
lorem ipsum
', document.body) .jdm_removeAttribute('id'); // Rimuove l'attributo 'id' dall'elemento div.`$3 Imposta un valore per una proprietà di stile CSS su un elemento DOM. Questo metodo applica una dichiarazione di stile CSS all'elemento DOM rappresentato dathis.node. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato applicato lo stile, consentendo il chaining dei metodi. | Param | Type | Description | | --- | --- | --- | | style | string | Il nome della proprietà di stile CSS da impostare (ad esempio, "color", "backgroundColor"). | | value | string | Il valore da assegnare alla proprietà di stile CSS (ad esempio, "red", "10px"). |
Example`js const div = JDM('
lorem ipsum
', document.body) .jdm_setStyle('color', 'red'); // Imposta il colore del testo dell'elemento div su rosso.`$3 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. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stata aggiunta la proprietà personalizzata, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | name | string | | Il nome della proprietà da aggiungere all'elemento DOM. | | [object] | Object \| null | | L'oggetto o il valore da associare alla proprietà. Può essere qualsiasi tipo di valore, inclusonull. |
Example`js const div = JDM('
lorem ipsum
', 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' }`$3 Imposta o restituisce il contenuto HTML interno dell'elemento DOM. Questo metodo imposta il valore diinnerHTML dell'elemento DOM rappresentato da this.node. Se il parametrovalueviene fornito, aggiorna il contenuto HTML; altrimenti, restituisce il contenuto HTML attuale. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM con il nuovo contenuto HTML impostato, consentendo il chaining dei metodi. | Param | Type | Description | | --- | --- | --- | | value | string | Il contenuto HTML da impostare all'interno dell'elemento DOM. Se non fornito, il metodo restituirà il contenuto HTML corrente. |
Example`js JDM('
lorem ipsum
', document.body) .jdm_innerHTML('Dolor sit amet '); // Imposta il contenuto HTML del div con un nuovo paragrafo.`$3 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 uninput), 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. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato applicato il binding, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | el | HTMLElement \| Array.<HTMLElement> | | L'elemento o la lista di elementi con cui si desidera stabilire il binding. | | [event] | string | "\"input\"" | Il tipo di evento da ascoltare per attivare il binding. Default è "input". | | [twoWayDataBinding] | boolean | true | Setrue, attiva il binding bidirezionale. Se false, il binding sarà unidirezionale. |
Example`js 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'.`
$3
Aggiunge un listener per l'eventoinputall'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipoinputsull'elemento. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventoinput. La funzione riceverà l'evento come parametro. |
Example`js const input = JDM('input', document.body) .jdm_onInput((event) => { console.log('Input modificato:', input.jdm_getValue()); }); // Aggiunge un listener per l'evento 'input' che stampa il valore dell'input ogni volta che cambia.`
$3
Aggiunge un listener per l'eventochangeall'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipochangesull'elemento. L'eventochangeviene attivato quando il valore di un elemento, come un campo di input, viene modificato e l'elemento perde il focus. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventochange. La funzione riceverà l'evento come parametro. |
Example`js const input = JDM('input', document.body) .jdm_onChange(() => { console.log('Valore cambiato:', input.jdm_getValue()); }); // Aggiunge un listener per l'evento 'change' che stampa il valore dell'input ogni volta che cambia.`
$3
Aggiunge un listener per l'eventoselectall'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tiposelectsull'elemento. L'eventoselectviene attivato quando una parte del testo all'interno di un elemento, come un campo di input o una textarea, viene selezionata dall'utente. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventoselect. La funzione riceverà l'evento come parametro. |
Example`js const input = JDM('', document.body) .jdm_onSelect((event) => { console.log('Testo selezionato:', input.jdm_getValue()); }); // Aggiunge un listener per l'evento 'select' che stampa il valore del campo di input ogni volta che viene selezionato del testo.`
$3
Aggiunge un listener per l'eventoinputall'elemento DOM con un meccanismo di debounce. Questo metodo permette di eseguire una funzione di callback solo dopo che l'utente ha smesso di digitare per un determinato periodo di tempo. È utile per evitare l'esecuzione ripetitiva di funzioni (come una ricerca o un aggiornamento) mentre l'utente sta digitando, migliorando le prestazioni. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventoinput. La funzione verrà eseguita dopo che l'utente smette di digitare per un periodo di tempo specificato dal parametro timeout. | | [timeout] | number | 300 | Il tempo di attesa (in millisecondi) dopo l'ultimo eventoinput prima che la funzione di callback venga eseguita. Il valore predefinito è 300 millisecondi. |
Example`js const input = JDM('input', document.body) .jdm_onDebounce(() => { console.log('Input debounced:',input.jdm_getValue()); }, 500); // Aggiunge un listener per l'evento 'input' con un debounce di 500 millisecondi, // evitando chiamate troppo frequenti alla funzione di callback mentre l'utente sta digitando.`
$3
Aggiunge un listener per l'eventoclickall'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipoclicksull'elemento. L'eventoclickviene attivato quando l'utente clicca su un elemento, come un pulsante o un link. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventoclick. La funzione riceverà l'evento come parametro. |
Example`js const button = JDM('', document.body) .jdm_onClick((event) => { console.log('Button clicked'); }); // Aggiunge un listener per l'evento 'click' che stampa un messaggio ogni volta che il pulsante viene cliccato.`
$3
Aggiunge un listener per l'eventocontextmenu(clic destro) all'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipocontextmenusull'elemento, che viene attivato dal clic destro del mouse (o equivalente, come il tocco prolungato su dispositivi mobili). L'eventocontextmenuè tipicamente usato per visualizzare il menu contestuale di un elemento. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventocontextmenu. La funzione riceverà l'evento come parametro. |
Example`js const element = JDM('
RIGHT CLICK
', document.body).jdm_onRightClick((event) => { event.preventDefault(); // Previene il menu contestuale predefinito console.log('Clic destro eseguito!'); }); // Aggiunge un listener per l'evento 'contextmenu' che esegue la funzione di callback ogni volta che si fa clic destro sull'elemento.`$3 Aggiunge un listener per l'eventodblclick(doppio clic) all'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipodblclicksull'elemento, che viene attivato quando l'utente fa doppio clic su un elemento. L'eventodblclickè comunemente utilizzato per azioni che richiedono un'interazione più rapida dell'utente, come l'apertura di un file o l'attivazione di una funzionalità. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventodblclick. La funzione riceverà l'evento come parametro. |
Example`js const element = JDM('
Double click
', document.body) .jdm_onDoubleClick((event) => { console.log('Elemento doppiamente cliccato'); }); // Aggiunge un listener per l'evento 'dblclick' che esegue la funzione di callback ogni volta che l'utente fa doppio clic sull'elemento.`$3 Aggiunge un listener per l'eventoinvalidall'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipoinvalidsull'elemento, che viene attivato quando un elemento di modulo non soddisfa i suoi vincoli di validazione. L'eventoinvalidviene in genere generato automaticamente dal browser quando un utente invia un modulo con campi non validi. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventoinvalid. La funzione riceverà l'evento come parametro. |
Example`js const formString =

; const form = JDM(formString, document.body) form.jdm_childNode.inputNumeric .jdm_onInvalid((e) => { console.log('Il campo input è invalido'); }) // Aggiunge un listener per l'evento 'invalid' che esegue la funzione di callback quando l'input non è valido.`$3 Aggiunge un listener per l'eventoloadall'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipoloadsull'elemento, che viene attivato quando l'elemento o le risorse a esso associate sono completamente caricate. L'eventoloadviene comunemente utilizzato per monitorare il caricamento di immagini, script o altri contenuti multimediali, ma può essere attivato anche quando una pagina o un elemento è stato completamente caricato nel DOM. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventoload. La funzione riceverà l'evento come parametro. |
Example`js const image = JDM('', document.body) .jdm_onLoad(() => { console.log('Immagine caricata con successo'); }); // Aggiunge un listener per l'evento 'load' che esegue la funzione di callback ogni volta che l'immagine è completamente caricata.`
$3
Aggiunge un listener per l'eventoerrorall'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipoerrorsull'elemento, che viene attivato quando si verifica un errore durante il caricamento di risorse o altre operazioni. L'eventoerrorviene comunemente utilizzato per gestire errori di caricamento, come quando un'immagine non riesce a caricarsi o quando un file JavaScript o CSS non può essere caricato correttamente. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventoerror. La funzione riceverà l'evento come parametro. |
Example`js const imgElement = JDM('', document.body) .jdm_onError(() => { console.log('Si è verificato un errore nel caricamento dell\'immagine'); }); // Aggiunge un listener per l'evento 'error' che esegue la funzione di callback ogni volta che si verifica un errore nel caricamento dell'immagine.`
$3
Aggiunge un listener per l'eventosubmitall'elemento DOM. Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tiposubmitsull'elemento, che viene attivato quando un modulo viene inviato. L'eventosubmitviene generato quando un utente invia un modulo, sia tramite il pulsante di invio che premendo il tasto "Enter" in un campo del modulo. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | [fn] | function | () => {} | La funzione di callback da eseguire quando si verifica l'eventosubmit. La funzione riceverà l'evento come parametro. Se necessario, la funzione di callback può chiamare event.preventDefault() per prevenire l'invio del modulo. |
Example`js const formString =

; const form = JDM(formString, document.body) .jdm_onSubmit((e)=> { e.preventDefault(); console.log('submit'); }) // Aggiunge un listener per l'evento 'submit' che esegue la funzione di callback ogni volta che il modulo viene inviato.`$3 Imposta il valore di un elemento DOM. Se l'elemento è una checkbox, un radio button o un modulo, il valore verrà impostato di conseguenza. Se l'elemento è un modulo (
), verranno impostati i valori di tutti i campi del modulo, compresi i checkbox e i radio buttons. Inoltre, è possibile forzare il valore a essere trattato come booleano tramite il parametrotooBoolean. Kind: instance method of Jdm Returns: Jdm - - Restituisce l'elemento DOM su cui è stato impostato il valore, consentendo il chaining dei metodi.
| Param | Type | Default | Description | | --- | --- | --- | --- | | value | any | | Il valore da impostare sull'elemento DOM. Il tipo di valore dipende dall'elemento e dal contesto. | | [tooBoolean] | boolean | true | Se impostato sutrue, tenterà di convertire il valore in booleano. Se il valore non è convertibile in booleano, verrà mantenuto il valore originale. Se impostato su false, il valore non verrà modificato. |
Example`js const checkboxElement = JDM('', document.body) .jdm_setValue(true); // Imposta il valore di una checkbox su 'true', facendo in modo che sia selezionata.
const data = { inputNumeric: 1, name: 'foo', surname : 'bar' }
const formString =

; const form = JDM(formString, document.body) .jdm_setValue(data); // Imposta i valori del modulo, inclusi i checkbox e altri input.`$3 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 valorecheckeddell'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', document.body)
.jdm_getValue();
console.log(checkboxValue); // log true
const data = {
inputNumeric: 1,
name: 'foo',
surname: 'bar'
}
const formString =

; const form = JDM(formString, document.body) .jdm_setValue(data); console.log(form.jdm_getValue()); // Restituisce un oggetto JSON con i dati del modulo, es. // { inputNumeric: '1', name: 'foo', surname: 'bar' }
const selectString =
; const select = JDM(selectString, document.body); console.log(select.jdm_getValue()); // log 'bar'`
$3
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. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento su cui è stato generato l'evento, per consentire il chaining.
| Param | Type | Default | Description | | --- | --- | --- | --- | | name | string | | Il nome dell'evento da generare. Può essere qualsiasi stringa che rappresenta un tipo di evento personalizzato. | | [data] | Object \| null | | I dati da associare all'evento. Questi dati vengono passati come parte dell'oggetto evento. Può esserenullse non sono necessari dati aggiuntivi. | | [propagateToParents] | boolean | true | Un valore booleano che indica se l'evento deve essere propagato ai genitori dell'elemento. Il valore predefinito ètrue. |
Example`js const element = JDM('', document.body) .jdm_addEventListener('customEvent', (event)=> { console.log(event.detail) }) element.jdm_genEvent('customEvent', { message: 'Evento generato!' });`
$3
Aggiunge un listener per un evento specificato sull'elemento DOM associato. Consente di eseguire una funzione di callback quando l'evento si verifica. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui è stato aggiunto l'evento, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | name | string | | Il nome dell'evento per cui aggiungere il listener (es. "click", "input", ecc.). | | [fn] | function | () => {} | La funzione di callback che viene eseguita quando l'evento si verifica. Il valore predefinito è una funzione vuota. |
Example`js const element = JDM('
Click me
', document.body) .jdm_addEventListener('click', () => { console.log('Click!'); }) .jdm_addEventListener('contextmenu', () => { console.log('Right Click!'); })`$3 Rimuove un listener per un evento specificato sull'elemento DOM associato. Questo metodo permette di interrompere l'esecuzione della funzione di callback quando l'evento si verifica. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento da cui è stato rimosso l'evento, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | name | string | | Il nome dell'evento per cui rimuovere il listener (es. "click", "input", ecc.). | | [fn] | function | () => {} | La funzione di callback che era stata precedentemente aggiunta come listener. Il valore predefinito è una funzione vuota. |
Example`js // Rimuovi un listener per l'evento 'click' su un elemento const element = JDM('
lorem ipsum
', document.body); const clickHandler = () => { console.log('Elemento cliccato!'); }; element.jdm_addEventListener('click', clickHandler); // Dopo un certo punto, rimuoviamo il listener element.jdm_removeEventListener('click', clickHandler);
// Rimuovi un listener per l'evento 'input' su un elemento con funzione di callback predefinita element.jdm_removeEventListener('input');`
$3
Estende l'elemento corrente con i nodi figli definiti injdm_childNode. Se l'elemento ha nodi figli associati ajdm_childNode, questi vengono aggiunti come proprietà dell'elemento stesso. $3
Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. Example`js const domString =

Element 1

Element 2

Element 3

; const div = JDM(domString, document.body) .jdm_extendChildNode(); console.log(div.element1); console.log(div.element2); console.log(div.element3);`$3 Rimuove tutte le animazioni attive sul nodo e ripristina lo stile iniziale.
Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo per consentire il chaining. Example`js JDM(
Test
, document.body) .jdm_clearAnimations();`$3 Applica un'animazione di fade-in sul nodo. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeIn
, document.body) .jdm_fadeIn(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})`$3 Applica un'animazione tipo fadeInDown al nodo . Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeInDown
, document.body) .jdm_fadeInDown(() => console.log('done'), { duration: 1000, easing: 'ease-out' });`$3 Applica un'animazione tipo fadeInUp al nodo . Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeInUp
, document.body) .jdm_fadeInUp(() => console.log('Fade in up concluso'), { duration: 800 });`$3 Applica un'animazione tipo fadeInLeft al nodo . Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeInLeft
, document.body) .jdm_fadeInLeft(() => console.log('Fade in left concluso'), { duration: 800 });`$3 Applica un'animazione tipo fadeInRight al nodo . Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeInRight
, document.body) .jdm_fadeInRight(() => console.log('Fade in right concluso'), { duration: 800 });`$3 Applica un'animazione di fade-out sul nodo. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeOut
, document.body) .jdm_fadeOut(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})`$3 Applica un'animazione di fade out right sul nodo. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeOutRight
, document.body) .jdm_fadeOutRight(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})`$3 Applica un'animazione di fade out up sul nodo. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeOutUp
, document.body) .jdm_fadeOutUp(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})`$3 Applica un'animazione di fade out down sul nodo. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeOutDown
, document.body) .jdm_fadeOutDown(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})`$3 Applica un'animazione di fade out left sul nodo. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
FadeOutLeft
, document.body) .jdm_fadeOutLeft(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})`$3 Applica un'animazione tipo bounce al nodo (come in animate.css). Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
Bounce
, document.body) .jdm_bounce(() => console.log('Bounce completato!'), { duration: 1000 });`$3 Applica un'animazione tipo tada al nodo (come in animate.css). Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
Tada
, document.body) .jdm_tada(() => console.log('Tada completato!'), { duration: 1000 });`$3 Applica un'animazione di zoom-in e fade-in al nodo. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
ZoomIn
, document.body) .jdm_zoomIn(() => console.log('ZoomIn completato!'), { duration: 1000 });`$3 Applica un'animazione di zoom-out e fade-out al nodo. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
ZoomOut
, document.body) .jdm_zoomOut(() => console.log('ZoomOut!'), { duration: 1000 });`$3 Applica un'animazione di rotazione all'elemento. Kind: instance method of Jdm Returns: Jdm - - Restituisce il nodo dell'elemento a cui sono stati estesi i metodi, per consentire il chaining. | Param | Type | Default | Description | | --- | --- | --- | --- | | [callbackFn] | function | | Funzione da eseguire al termine dell'animazione. | | [deg] | number | 360 | Gradi di rotazione da applicare (positivi in senso orario, negativi in senso antiorario). | | [option] | Partial.<AnimationOption> | new AnimationOption() | Opzioni dell'animazione. |
Example`js JDM(
Rotate
, document.body) .jdm_rotation(() => console.log('Rotazione completata'), 180, { duration: 1000 });``

jdm_javascript_dom_manipulator

Jdm

INSTALLAZIONE:

USO

COMPARAZIONE:

jQuery:

JavaScript puro:

Jdm:

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`