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-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_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_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_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_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_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-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Proto.html">Proto</a></span></li> </nav> <div id="main"> <h1 class="page-title">Jdm</h1> <section> <header> <h2> Jdm </h2> </header> <article> <div class="container-overview"> <div class="section-method"> <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#line184">line 184</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"> → {HTMLElement}</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#line439">line 439</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>HTMLElement</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"> → {Node}</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#line1169">line 1169</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>Node</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"> → {HTMLElement}</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#line420">line 420</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>HTMLElement</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"> → {HTMLElement}</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#line367">line 367</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>HTMLElement</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_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"> → {HTMLElement}</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#line654">line 654</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>HTMLElement</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_destroy"><span class="type-signature"></span>jdm_destroy<span class="signature">()</span><span class="type-signature"> → {HTMLElement}</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#line545">line 545</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>HTMLElement</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"> → {HTMLElement}</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#line520">line 520</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>HTMLElement</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"> → {Node}</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#line1220">line 1220</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>Node</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"> → {HTMLElement}</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#line615">line 615</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 della proprietà da aggiungere all'elemento DOM. </td> </tr> <tr> <td class="name"><code>object</code></td> <td class="type"> <span class="param-type"><code>Object</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'oggetto o il valore da associare alla proprietà. Può essere qualsiasi tipo di valore, incluso `null`. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code>HTMLElement</code></span> </dd> </dl> <div class="param-desc"> - Restituisce l'elemento DOM su cui è stata aggiunta la proprietà personalizzata, 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_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' }</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_fadeIn"><span class="type-signature"></span>jdm_fadeIn<span class="signature">(option<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4> <div class="description"> Applica un'animazione di fade-in sul nodo. </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#line1236">line 1236</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>option</code></td> <td class="type"> <span class="param-type"><code>object</code></span> </td> <td class="attributes"> <optional><br> </td> <td class="default"> new AnimationOption() </td> <td class="description last"> Opzioni dell'animazione. </td> </tr> <tr> <td class="name"><code>callback</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> </tbody> </table> </div> <div class="section-method"> <h4 class="name" id="jdm_genEvent"><span class="type-signature"></span>jdm_genEvent<span class="signature">(name, data<span class="signature-attributes">opt</span>, propagateToParents<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {Node}</span></h4> <div class="description"> 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. </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#line1146">line 1146</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 da generare. Può essere qualsiasi stringa che rappresenta un tipo di evento personalizzato. </td> </tr> <tr> <td class="name"><code>data</code></td> <td class="type"> <span class="param-type"><code>Object</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"> I dati da associare all'evento. Questi dati vengono passati come parte dell'oggetto evento. Può essere `null` se non sono necessari dati aggiuntivi. </td> </tr> <tr> <td class="name"><code>propagateToParents</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"> Un valore booleano che indica se l'evento deve essere propagato ai genitori dell'elemento. Il valore predefinito è `true`. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code>Node</code></span> </dd> </dl> <div class="param-desc"> - Restituisce il nodo dell'elemento su cui è stato generato l'evento, per consentire il chaining. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>const element = JDM('<input>', document.body) .jdm_addEventListener('customEvent', (event)=> { console.log(event.detail) }) element.jdm_genEvent('customEvent', { message: 'Evento generato!' });</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_getAttribute"><span class="type-signature"></span>jdm_getAttribute<span class="signature">(attribute)</span><span class="type-signature"> → {string|null}</span></h4> <div class="description"> Recupera il valore di un attributo di un 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#line347">line 347</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>attribute</code></td> <td class="type"> <span class="param-type"><code>string</code></span> </td> <td class="description last"> Il nome dell'attributo di cui si desidera ottenere il valore. </td> </tr> </tbody> </table> <div class="section-returns"> <h5>Returns:</h5> <dl class="param-type"> <dt> Type: </dt> <dd> <span class="param-type"><code>string</code></span> | <span class="param-type"><code>null</code></span> </dd> </dl> <div class="param-desc"> - Restituisce il valore dell'attributo se esiste, altrimenti `null` se l'attributo non è presente. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body) .jdm_setAttribute('data-test', 'foo'); const dataTest = div.jdm_getAttribute('data-test')</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_getValue"><span class="type-signature"></span>jdm_getValue<span class="signature">()</span><span class="type-signature"> → {any}</span></h4> <div class="description"> 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 `<select>`. - **Altri input** (testo, numero, range): restituisce il valore dell'elemento come una stringa. </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#line1079">line 1079</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>any</code></span> </dd> </dl> <div class="param-desc"> - Il valore dell'elemento DOM. Se l'elemento è un modulo, restituisce un oggetto JSON con i dati del modulo. </div> </div> <div class="section-examples"> <h5>Example</h5> <pre class="prettyprint"><code>const checkboxValue = JDM('<input type="checkbox" checked>', document.body) .jdm_getValue(); console.log(checkboxValue); // log true const data = { inputNumeric: 1, name: 'foo', surname: 'bar' } const formString = ` <form> <input name="inputNumeric" type="number" min="1" max="10"/> <input name="name" type="text"/> <input name="surname" type="text"/> <button type="submit"> Submit </button> </form>`; 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 = ` <select name="foo"> <option value="foo">foo</option> <option value="bar" selected>bar</option> </select>`; const select = JDM(selectString, document.body); console.log(select.jdm_getValue()); // log 'bar'</code></pre> </div> </div> <div class="section-method"> <h4 class="name" id="jdm_innerHTML"><span class="type-signature"></span>jdm_innerHTML<span class="signature">(value)</span><span class="type-signature"> → {HTMLElement}</span></h4> <div class="description"> Imposta o restituisce il contenuto HTML interno dell'elemento DOM. Questo metodo imposta il valore di `innerHTML` dell'elemento DOM rappresentato da `this.node`. Se il parametro `value` viene fornito, aggiorna il contenuto HTML; altrimenti, restituisce il contenuto HTML attuale. </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#line633">line 633</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>