jdm_javascript_dom_manipulator

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Jdm - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="AnimationOption.html">AnimationOption</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Jdm.html">Jdm</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_addClassList">jdm_addClassList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_addEventListener">jdm_addEventListener</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_addId">jdm_addId</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_append">jdm_append</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_appendAfter">jdm_appendAfter</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_appendBefore">jdm_appendBefore</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_binding">jdm_binding</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_bounce">jdm_bounce</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_clearAnimations">jdm_clearAnimations</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_destroy">jdm_destroy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_empty">jdm_empty</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_extendChildNode">jdm_extendChildNode</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_extendNode">jdm_extendNode</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeIn">jdm_fadeIn</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeInDown">jdm_fadeInDown</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeInLeft">jdm_fadeInLeft</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeInRight">jdm_fadeInRight</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeInUp">jdm_fadeInUp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOut">jdm_fadeOut</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOutDown">jdm_fadeOutDown</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOutLeft">jdm_fadeOutLeft</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOutRight">jdm_fadeOutRight</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOutUp">jdm_fadeOutUp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_findClassList">jdm_findClassList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_genEvent">jdm_genEvent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_getAttribute">jdm_getAttribute</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_getValue">jdm_getValue</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_innerHTML">jdm_innerHTML</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onChange">jdm_onChange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onClick">jdm_onClick</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onDebounce">jdm_onDebounce</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onDoubleClick">jdm_onDoubleClick</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onError">jdm_onError</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onInput">jdm_onInput</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onInvalid">jdm_onInvalid</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onLoad">jdm_onLoad</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onRightClick">jdm_onRightClick</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onSelect">jdm_onSelect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onSubmit">jdm_onSubmit</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_prepend">jdm_prepend</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_removeAttribute">jdm_removeAttribute</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_removeClassList">jdm_removeClassList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_removeEventListener">jdm_removeEventListener</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_rotation">jdm_rotation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_setAttribute">jdm_setAttribute</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_setStyle">jdm_setStyle</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_setValue">jdm_setValue</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_tada">jdm_tada</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_toggleClassList">jdm_toggleClassList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_validate">jdm_validate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_zoomIn">jdm_zoomIn</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_zoomOut">jdm_zoomOut</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Proto.html">Proto</a></span></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#_animation.">_animation.</a></span></li> </nav> <div id="main"> <h1 class="page-title">Jdm</h1> <section> <header> <h2> Jdm </h2> <div class="class-description">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 <script src="./dist/jdm.js"></script> ``` 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 = $('<div>', { class: 'foo bar' }); const $ul = $('<ul>'); const $li1 = $('<li>').text('Elemento 1'); const $li2 = $('<li>').text('Elemento 2'); const $li3 = $('<li>').text('Elemento 3'); const $li4 = $('<li>').text('Elemento 4'); const $li5 = $('<li>').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 = ` <div class="foo bar"> <ul> <li> Elemento 1 </li> <li> Elemento 2 </li> <li> Elemento 3 </li> <li> Elemento 4 </li> <li> Elemento 5 </li> </ul> </div>`; const div = JDM(domString, document.body); ```</div> </header> <article> <div class="container-overview"> <div class="section-method"> <h2>Constructor</h2> <h4 class="name" id="Jdm"><span class="type-signature"></span>new Jdm<span class="signature">(element<span class="signature-attributes">opt</span>, parent<span class="signature-attributes">opt</span>, classList<span class="signature-attributes">opt</span>, deep<span class="signature-attributes">opt</span>, …args<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> Crea una nuova istanza della classe Jdm e manipola l'elemento DOM. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line143">line 143</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>element</code></td> <td class="type"> <span class="param-type"><code>HTMLElement</code></span> | <span class="param-type"><code>null</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> null </td> <td class="description last"> L'elemento DOM da manipolare. Se non specificato, verrà creato un nuovo nodo. </td> </tr> <tr> <td class="name"><code>parent</code></td> <td class="type"> <span class="param-type"><code>HTMLElement</code></span> | <span class="param-type"><code>null</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> null </td> <td class="description last"> Il genitore dell'elemento. Se specificato, l'elemento verrà aggiunto come figlio del genitore. </td> </tr> <tr> <td class="name"><code>classList</code></td> <td class="type"> <span class="param-type"><code>Array.<string></code></span> | <span class="param-type"><code>null</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> null </td> <td class="description last"> Una lista di classi da aggiungere all'elemento. Se specificato, verranno aggiunte le classi all'elemento. </td> </tr> <tr> <td class="name"><code>deep</code></td> <td class="type"> <span class="param-type"><code>boolean</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> true </td> <td class="description last"> Se impostato su `true`, i figli dell'elemento verranno manipolati ricorsivamente. </td> </tr> <tr> <td class="name"><code>args</code></td> <td class="type"> <span class="param-type"><code>*</code></span> </td> <td class="attributes"> <optional><br> <repeatable><br> </td> <td class="default"> </td> <td class="description last"> Altri argomenti opzionali che possono essere passati per la manipolazione del nodo. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce il nodo appena creato o manipolato. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>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</code></pre> </div> </div> </div> <h3 class="subsection-title">Methods</h3> <div class="section-method"> <h4 class="name" id="jdm_addClassList"><span class="type-signature"></span>jdm_addClassList<span class="signature">(classList)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> 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. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line464">line 464</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>classList</code></td> <td class="type"> <span class="param-type"><code>string</code></span> | <span class="param-type"><code>Array.<string></code></span> </td> <td class="description last"> Una singola classe CSS o un array di classi CSS da aggiungere all'elemento DOM. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM su cui le classi sono state aggiunte, consentendo il chaining dei metodi. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>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.</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_addEventListener"><span class="type-signature"></span>jdm_addEventListener<span class="signature">(name, fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> Aggiunge un listener per un evento specificato sull'elemento DOM associato. Consente di eseguire una funzione di callback quando l'evento si verifica. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1048">line 1048</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>name</code></td> <td class="type"> <span class="param-type"><code>string</code></span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last"> Il nome dell'evento per cui aggiungere il listener (es. "click", "input", ecc.). </td> </tr> <tr> <td class="name"><code>fn</code></td> <td class="type"> <span class="param-type"><code>function</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> () => {} </td> <td class="description last"> La funzione di callback che viene eseguita quando l'evento si verifica. Il valore predefinito è una funzione vuota. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce il nodo dell'elemento a cui è stato aggiunto l'evento, per consentire il chaining. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>const element = JDM('<div>Click me</div>', document.body) .jdm_addEventListener('click', () => { console.log('Click!'); }) .jdm_addEventListener('contextmenu', () => { console.log('Right Click!'); })</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_addId"><span class="type-signature"></span>jdm_addId<span class="signature">(id)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> Aggiunge un attributo `id` all'elemento DOM specificato. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line443">line 443</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>id</code></td> <td class="type"> <span class="param-type"><code>string</code></span> </td> <td class="description last"> Il valore dell'attributo `id` da impostare sull'elemento DOM. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM su cui è stato impostato l'attributo `id`, consentendo il chaining dei metodi. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body) .jdm_addId('myDiv'); // Imposta l'attributo id="myDiv" sull'elemento div.</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_append"><span class="type-signature"></span>jdm_append<span class="signature">(elementList)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> 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. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line360">line 360</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>elementList</code></td> <td class="type"> <span class="param-type"><code>HTMLElement</code></span> | <span class="param-type"><code>Array.<HTMLElement></code></span> </td> <td class="description last"> Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM su cui gli elementi sono stati aggiunti, consentendo il chaining dei metodi. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>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.</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_appendAfter"><span class="type-signature"></span>jdm_appendAfter<span class="signature">(elementList, elementTarget)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line428">line 428</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>elementList</code></td> <td class="type"> <span class="param-type"><code>HTMLElement</code></span> | <span class="param-type"><code>Array.<HTMLElement></code></span> </td> <td class="description last"> Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli. </td> </tr> <tr> <td class="name"><code>elementTarget</code></td> <td class="type"> <span class="param-type"><code>HTMLElement</code></span> </td> <td class="description last"> gli elementi di element list verranno inseriti dopo questo elemento </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM dietro il quale sono stati inseriti gli elementList, consentendo il chaining dei metodi. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>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></code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_appendBefore"><span class="type-signature"></span>jdm_appendBefore<span class="signature">(elementList, elementTarget)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line406">line 406</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>elementList</code></td> <td class="type"> <span class="param-type"><code>HTMLElement</code></span> | <span class="param-type"><code>Array.<HTMLElement></code></span> </td> <td class="description last"> Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli. </td> </tr> <tr> <td class="name"><code>elementTarget</code></td> <td class="type"> <span class="param-type"><code>HTMLElement</code></span> </td> <td class="description last"> gli elementi di element list verranno inseriti prima di questo elemento </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM davanti al quale sono stati inseriti gli elementList, consentendo il chaining dei metodi. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>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></code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_binding"><span class="type-signature"></span>jdm_binding<span class="signature">(el, event<span class="signature-attributes">opt</span>, twoWayDataBinding<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> 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. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line678">line 678</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>el</code></td> <td class="type"> <span class="param-type"><code>HTMLElement</code></span> | <span class="param-type"><code>Array.<HTMLElement></code></span> </td> <td class="attributes"> </td> <td class="default"> </td> <td class="description last"> L'elemento o la lista di elementi con cui si desidera stabilire il binding. </td> </tr> <tr> <td class="name"><code>event</code></td> <td class="type"> <span class="param-type"><code>string</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> "input" </td> <td class="description last"> Il tipo di evento da ascoltare per attivare il binding. Default è "input". </td> </tr> <tr> <td class="name"><code>twoWayDataBinding</code></td> <td class="type"> <span class="param-type"><code>boolean</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> true </td> <td class="description last"> Se `true`, attiva il binding bidirezionale. Se `false`, il binding sarà unidirezionale. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM su cui è stato applicato il binding, consentendo il chaining dei metodi. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>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'.</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_bounce"><span class="type-signature"></span>jdm_bounce<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> Applica un'animazione tipo bounce al nodo (come in animate.css). </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1278">line 1278</a> </li></ul></dd> </dl> <h5>Parameters:</h5> <table class="params"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Attributes</th> <th>Default</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>callbackFn</code></td> <td class="type"> <span class="param-type"><code>function</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> </td> <td class="description last"> Funzione da eseguire al termine dell'animazione. </td> </tr> <tr> <td class="name"><code>option</code></td> <td class="type"> <span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> new AnimationOption() </td> <td class="description last"> Opzioni dell'animazione. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>JDM(`<div class="foo"> Bounce </div>`, document.body) .jdm_bounce(() => console.log('Bounce completato!'), { duration: 1000 });</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_clearAnimations"><span class="type-signature"></span>jdm_clearAnimations<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> Rimuove tutte le animazioni attive sul nodo e ripristina lo stile iniziale. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1110">line 1110</a> </li></ul></dd> </dl> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce il nodo per consentire il chaining. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>JDM(`<div class="foo animated"> Test </div>`, document.body) .jdm_clearAnimations();</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_destroy"><span class="type-signature"></span>jdm_destroy<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> 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". </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line566">line 566</a> </li></ul></dd> </dl> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM che è stato rimosso, consentendo il chaining dei metodi. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body) .jdm_destroy(); // Rimuove l'elemento div dal documento e genera un evento "destroy".</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_empty"><span class="type-signature"></span>jdm_empty<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> 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). </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line549">line 549</a> </li></ul></dd> </dl> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM su cui è stato effettuato lo svuotamento, consentendo il chaining dei metodi. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>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.</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_extendChildNode"><span class="type-signature"></span>jdm_extendChildNode<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> 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 </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1096">line 1096</a> </li></ul></dd> </dl> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span> </dd> </dl> <div class="param-desc"> - Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>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);</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_extendNode"><span class="type-signature"></span>jdm_extendNode<span class="signature">(name, object<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4> <div class="description"> 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`. </div> <dl class="details"> <dt class="tag-source">Source:</dt> <dd class="tag-source"><ul class="dummy"><li> <a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line637">line 637