jdm_javascript_dom_manipulator
Version:
framework javascript
914 lines (882 loc) • 91.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Home - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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">
<section class="readme">
<article><p><a name="Jdm"></a></p>
<h2>Jdm</h2>
<p>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.</p>
<h1>INSTALLAZIONE:</h1>
<p>NPM</p>
<pre class="prettyprint source lang-bash"><code>npm install jdm_javascript_dom_manipulator
</code></pre>
<p>Esempio di utilizzo classico (da inserire prima degli script che usano JDM):</p>
<pre class="prettyprint source lang-html"><code><script src="./dist/jdm.js"></script>
</code></pre>
<p>Esempio di utilizzo di un modulo ES6 (NB: usa jdm.es.js):</p>
<pre class="prettyprint source lang-javascript"><code>import './dist/jdm.es.js';
</code></pre>
<h1>USO</h1>
<pre class="prettyprint source lang-javascript"><code>JDM('div', container, ['fooClass','barClass'])
</code></pre>
<h1>COMPARAZIONE:</h1>
<h2>jQuery:</h2>
<pre class="prettyprint source lang-javascript"><code>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);
</code></pre>
<h2>JavaScript puro:</h2>
<pre class="prettyprint source lang-javascript"><code>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);
</code></pre>
<h2>Jdm:</h2>
<pre class="prettyprint source lang-javascript"><code>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);
</code></pre>
<p><strong>Kind</strong>: global class</p>
<ul>
<li><a href="#Jdm">Jdm</a>
<ul>
<li><a href="#new_Jdm_new">new Jdm([element], [parent], [classList], [deep], [...args])</a></li>
<li><a href="#Jdm+jdm_setAttribute">.jdm_setAttribute(attribute, [value])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_getAttribute">.jdm_getAttribute(attribute)</a> ⇒ <code>string</code> | <code>null</code></li>
<li><a href="#Jdm+jdm_append">.jdm_append(elementList)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_prepend">.jdm_prepend(elementList)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_appendBefore">.jdm_appendBefore(elementList, elementTarget)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_appendAfter">.jdm_appendAfter(elementList, elementTarget)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_addId">.jdm_addId(id)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_addClassList">.jdm_addClassList(classList)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_removeClassList">.jdm_removeClassList(classList)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_toggleClassList">.jdm_toggleClassList(classList)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_findClassList">.jdm_findClassList(classList, [some])</a> ⇒ <code>boolean</code></li>
<li><a href="#Jdm+jdm_empty">.jdm_empty()</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_destroy">.jdm_destroy()</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_validate">.jdm_validate()</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_removeAttribute">.jdm_removeAttribute(attribute)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_setStyle">.jdm_setStyle(style, value)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_extendNode">.jdm_extendNode(name, [object])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_innerHTML">.jdm_innerHTML(value)</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_binding">.jdm_binding(el, [event], [twoWayDataBinding])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onInput">.jdm_onInput([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onChange">.jdm_onChange([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onSelect">.jdm_onSelect([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onDebounce">.jdm_onDebounce([fn], [timeout])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onClick">.jdm_onClick([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onRightClick">.jdm_onRightClick([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onDoubleClick">.jdm_onDoubleClick([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onInvalid">.jdm_onInvalid([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onLoad">.jdm_onLoad([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onError">.jdm_onError([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_onSubmit">.jdm_onSubmit([fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_setValue">.jdm_setValue(value, [tooBoolean])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_getValue">.jdm_getValue()</a> ⇒ <code>any</code></li>
<li><a href="#Jdm+jdm_genEvent">.jdm_genEvent(name, [data], [propagateToParents])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_addEventListener">.jdm_addEventListener(name, [fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_removeEventListener">.jdm_removeEventListener(name, [fn])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_extendChildNode">.jdm_extendChildNode()</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_clearAnimations">.jdm_clearAnimations()</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeIn">.jdm_fadeIn([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeInDown">.jdm_fadeInDown([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeInUp">.jdm_fadeInUp([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeInLeft">.jdm_fadeInLeft([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeInRight">.jdm_fadeInRight([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeOut">.jdm_fadeOut([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeOutRight">.jdm_fadeOutRight([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeOutUp">.jdm_fadeOutUp([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeOutDown">.jdm_fadeOutDown([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_fadeOutLeft">.jdm_fadeOutLeft([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_bounce">.jdm_bounce([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_tada">.jdm_tada([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_zoomIn">.jdm_zoomIn([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_zoomOut">.jdm_zoomOut([callbackFn], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
<li><a href="#Jdm+jdm_rotation">.jdm_rotation([callbackFn], [deg], [option])</a> ⇒ <a href="#Jdm"><code>Jdm</code></a></li>
</ul>
</li>
</ul>
<p><a name="new_Jdm_new"></a></p>
<h3>new Jdm([element], [parent], [classList], [deep], [...args])</h3>
<p>Crea una nuova istanza della classe Jdm e manipola l'elemento DOM.</p>
<p><strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce il nodo appena creato o manipolato.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>[element]</td>
<td><code>HTMLElement</code> | <code>null</code></td>
<td><code></code></td>
<td>L'elemento DOM da manipolare. Se non specificato, verrà creato un nuovo nodo.</td>
</tr>
<tr>
<td>[parent]</td>
<td><code>HTMLElement</code> | <code>null</code></td>
<td><code></code></td>
<td>Il genitore dell'elemento. Se specificato, l'elemento verrà aggiunto come figlio del genitore.</td>
</tr>
<tr>
<td>[classList]</td>
<td><code>Array.<string></code> | <code>null</code></td>
<td><code></code></td>
<td>Una lista di classi da aggiungere all'elemento. Se specificato, verranno aggiunte le classi all'elemento.</td>
</tr>
<tr>
<td>[deep]</td>
<td><code>boolean</code></td>
<td><code>true</code></td>
<td>Se impostato su <code>true</code>, i figli dell'elemento verranno manipolati ricorsivamente.</td>
</tr>
<tr>
<td>[...args]</td>
<td><code>*</code></td>
<td></td>
<td>Altri argomenti opzionali che possono essere passati per la manipolazione del nodo.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_setAttribute"></a></p>
<h3>jdm.jdm_setAttribute(attribute, [value]) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Imposta un attributo su un elemento DOM e genera un evento personalizzato per il cambiamento.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Chainable</strong><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui l'attributo è stato impostato, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>attribute</td>
<td><code>string</code></td>
<td></td>
<td>Il nome dell'attributo da impostare sull'elemento DOM.</td>
</tr>
<tr>
<td>[value]</td>
<td><code>string</code> | <code>null</code></td>
<td><code>null</code></td>
<td>Il valore dell'attributo. Se non fornito, l'attributo sarà impostato su <code>null</code>.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_setAttribute('id', 'myDiv')
.jdm_setAttribute('data-test', 'foo')
.jdm_setAttribute('counter', 1);
</code></pre>
<p><a name="Jdm+jdm_getAttribute"></a></p>
<h3>jdm.jdm_getAttribute(attribute) ⇒ <code>string</code> | <code>null</code></h3>
<p>Recupera il valore di un attributo di un elemento DOM.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <code>string</code> | <code>null</code> - - Restituisce il valore dell'attributo se esiste, altrimenti <code>null</code> se l'attributo non è presente.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>attribute</td>
<td><code>string</code></td>
<td>Il nome dell'attributo di cui si desidera ottenere il valore.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_setAttribute('data-test', 'foo');
const dataTest = div.jdm_getAttribute('data-test')
</code></pre>
<p><a name="Jdm+jdm_append"></a></p>
<h3>jdm.jdm_append(elementList) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>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.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui gli elementi sono stati aggiunti, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>elementList</td>
<td><code>HTMLElement</code> | <code>Array.<HTMLElement></code></td>
<td>Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_prepend"></a></p>
<h3>jdm.jdm_prepend(elementList) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>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.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui gli elementi sono stati aggiunti, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>elementList</td>
<td><code>HTMLElement</code> | <code>Array.<HTMLElement></code></td>
<td>Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>const div = JDM('<div><p>paragrafo</p></div>', document.body);
const span = JDM('<span>foo</span>');
div.jdm_prepend(span);
// Risultato
<div>
<span>foo</span>
<p>paragrafo</p>
</div>
</code></pre>
<p><a name="Jdm+jdm_appendBefore"></a></p>
<h3>jdm.jdm_appendBefore(elementList, elementTarget) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM davanti al quale sono stati inseriti gli elementList, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>elementList</td>
<td><code>HTMLElement</code> | <code>Array.<HTMLElement></code></td>
<td>Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.</td>
</tr>
<tr>
<td>elementTarget</td>
<td><code>HTMLElement</code></td>
<td>gli elementi di element list verranno inseriti prima di questo elemento</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_appendAfter"></a></p>
<h3>jdm.jdm_appendAfter(elementList, elementTarget) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM dietro il quale sono stati inseriti gli elementList, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>elementList</td>
<td><code>HTMLElement</code> | <code>Array.<HTMLElement></code></td>
<td>Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.</td>
</tr>
<tr>
<td>elementTarget</td>
<td><code>HTMLElement</code></td>
<td>gli elementi di element list verranno inseriti dopo questo elemento</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_addId"></a></p>
<h3>jdm.jdm_addId(id) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Aggiunge un attributo <code>id</code> all'elemento DOM specificato.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stato impostato l'attributo <code>id</code>, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td><code>string</code></td>
<td>Il valore dell'attributo <code>id</code> da impostare sull'elemento DOM.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_addId('myDiv'); // Imposta l'attributo id="myDiv" sull'elemento div.
</code></pre>
<p><a name="Jdm+jdm_addClassList"></a></p>
<h3>jdm.jdm_addClassList(classList) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>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.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui le classi sono state aggiunte, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>classList</td>
<td><code>string</code> | <code>Array.<string></code></td>
<td>Una singola classe CSS o un array di classi CSS da aggiungere all'elemento DOM.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_removeClassList"></a></p>
<h3>jdm.jdm_removeClassList(classList) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>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.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui le classi sono state rimosse, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>classList</td>
<td><code>string</code> | <code>Array.<string></code></td>
<td>Una singola classe CSS o un array di classi CSS da rimuovere dall'elemento DOM.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>JDM('<div class="foo bar myClass"></div>', document.body)
.jdm_removeClassList('myClass'); // Rimuove la classe "myClass" dall'elemento.
JDM('<div class="foo bar myClass"></div>', document.body)
.jdm_removeClassList(['foo', 'bar']); // Rimuove "foo" e "bar" dall'elemento.
</code></pre>
<p><a name="Jdm+jdm_toggleClassList"></a></p>
<h3>jdm.jdm_toggleClassList(classList) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>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.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui le classi sono state alternate, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>classList</td>
<td><code>string</code> | <code>Array.<string></code></td>
<td>Una singola classe CSS o un array di classi CSS da alternare sull'elemento DOM.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_toggleClassList('active'); // Alterna la classe "active" sull'elemento div.
const div2 = JDM('<div>lorem ipsum</div>', document.body)
.jdm_toggleClassList(['class1', 'class2']); // Alterna le classi "class1" e "class2" sull'elemento div2.
</code></pre>
<p><a name="Jdm+jdm_findClassList"></a></p>
<h3>jdm.jdm_findClassList(classList, [some]) ⇒ <code>boolean</code></h3>
<p>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</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <code>boolean</code> - - ritorna true o false in base alla ricerca AND o OR</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>classList</td>
<td><code>string</code> | <code>Array.<string></code></td>
<td></td>
<td>Una singola classe CSS o un array di classi CSS da cercare.</td>
</tr>
<tr>
<td>[some]</td>
<td><code>boolean</code></td>
<td><code>false</code></td>
<td>Parametro che permette di scegliere se la ricerca è in AND o OR</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>const div = JDM('<div class="bar foo test" >lorem ipsum</div>', document.body)
.jdm_findClassList(["bar", "foo"]) // ritorna true perchè tutte le classi sono presenti
const div = JDM('<div class="bar foo test" >lorem ipsum</div>', document.body)
.jdm_findClassList(["bar", "var"], true) // ritorna true perchè bar è presente nelle classi
</code></pre>
<p><a name="Jdm+jdm_empty"></a></p>
<h3>jdm.jdm_empty() ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Svuota il contenuto dell'elemento DOM.
A seconda del tipo di elemento, il comportamento di "svuotamento" varia:</p>
<ul>
<li>Per gli elementi <code>input</code> di tipo <code>checkbox</code> o <code>radio</code>, deseleziona l'elemento (imposta <code>checked</code> a <code>false</code>).</li>
<li>Per gli altri elementi <code>input</code> o <code>textarea</code>, imposta il valore a <code>null</code> (svuotando il campo di testo).</li>
<li>Per un elemento <code>form</code>, esegue il reset del modulo (ripristina tutti i campi al loro stato iniziale).</li>
<li>Per altri tipi di elementi, rimuove il contenuto HTML dell'elemento (imposta <code>innerHTML</code> a una stringa vuota).</li>
</ul>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stato effettuato lo svuotamento, consentendo il chaining dei metodi.<br>
<strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_destroy"></a></p>
<h3>jdm.jdm_destroy() ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Rimuove l'elemento DOM dal documento e genera un evento di distruzione.
Questo metodo elimina l'elemento DOM rappresentato da <code>this.node</code> dalla struttura del documento.
Inoltre, viene generato un evento personalizzato chiamato "destroy".</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM che è stato rimosso, consentendo il chaining dei metodi.<br>
<strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_validate"></a></p>
<h3>jdm.jdm_validate() ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Verifica la validità dell'elemento <code>input</code> o <code>form</code> secondo le regole di validazione HTML.
Dopo la verifica, viene generato un evento personalizzato chiamato "validate", che segnala il risultato della validazione.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - L'elemento DOM su cui è stata effettuata la validazione, consentendo il chaining dei metodi.<br>
<strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>JDM('input', document.body)
.jdm_setAttribute('required', 'true')
.jdm_validate(); // Verifica la validità dell'input e genera l'evento "validate".
</code></pre>
<p><a name="Jdm+jdm_removeAttribute"></a></p>
<h3>jdm.jdm_removeAttribute(attribute) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Rimuove un attributo dall'elemento DOM e genera un evento di rimozione dell'attributo.
Questo metodo rimuove l'attributo specificato dall'elemento DOM rappresentato da <code>this.node</code>.
Inoltre, viene generato un evento personalizzato chiamato "removeAttribute" con il nome dell'attributo rimosso.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui l'attributo è stato rimosso, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>attribute</td>
<td><code>string</code></td>
<td>Il nome dell'attributo da rimuovere dall'elemento DOM.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>JDM('<div id="foo">lorem ipsum</div>', document.body)
.jdm_removeAttribute('id'); // Rimuove l'attributo 'id' dall'elemento div.
</code></pre>
<p><a name="Jdm+jdm_setStyle"></a></p>
<h3>jdm.jdm_setStyle(style, value) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>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 da <code>this.node</code>.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stato applicato lo stile, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>style</td>
<td><code>string</code></td>
<td>Il nome della proprietà di stile CSS da impostare (ad esempio, "color", "backgroundColor").</td>
</tr>
<tr>
<td>value</td>
<td><code>string</code></td>
<td>Il valore da assegnare alla proprietà di stile CSS (ad esempio, "red", "10px").</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_setStyle('color', 'red'); // Imposta il colore del testo dell'elemento div su rosso.
</code></pre>
<p><a name="Jdm+jdm_extendNode"></a></p>
<h3>jdm.jdm_extendNode(name, [object]) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Estende l'elemento DOM aggiungendo una proprietà personalizzata.
Questo metodo assegna un oggetto o un valore alla proprietà <code>name</code> dell'elemento DOM rappresentato da <code>this.node</code>.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stata aggiunta la proprietà personalizzata, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td><code>string</code></td>
<td></td>
<td>Il nome della proprietà da aggiungere all'elemento DOM.</td>
</tr>
<tr>
<td>[object]</td>
<td><code>Object</code> | <code>null</code></td>
<td><code></code></td>
<td>L'oggetto o il valore da associare alla proprietà. Può essere qualsiasi tipo di valore, incluso <code>null</code>.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_innerHTML"></a></p>
<h3>jdm.jdm_innerHTML(value) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Imposta o restituisce il contenuto HTML interno dell'elemento DOM.
Questo metodo imposta il valore di <code>innerHTML</code> dell'elemento DOM rappresentato da <code>this.node</code>.
Se il parametro <code>value</code> viene fornito, aggiorna il contenuto HTML; altrimenti, restituisce il contenuto HTML attuale.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM con il nuovo contenuto HTML impostato, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td><code>string</code></td>
<td>Il contenuto HTML da impostare all'interno dell'elemento DOM. Se non fornito, il metodo restituirà il contenuto HTML corrente.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>JDM('<div>lorem ipsum</div>', document.body)
.jdm_innerHTML('<p>Dolor sit amet</p>');
// Imposta il contenuto HTML del div con un nuovo paragrafo.
</code></pre>
<p><a name="Jdm+jdm_binding"></a></p>
<h3>jdm.jdm_binding(el, [event], [twoWayDataBinding]) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>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 <code>input</code>), il valore dell'elemento di destinazione (ad esempio un altro <code>input</code> o <code>div</code>) viene aggiornato.
Se il binding bidirezionale è abilitato, i cambiamenti sono sincronizzati in entrambe le direzioni.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stato applicato il binding, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>el</td>
<td><code>HTMLElement</code> | <code>Array.<HTMLElement></code></td>
<td></td>
<td>L'elemento o la lista di elementi con cui si desidera stabilire il binding.</td>
</tr>
<tr>
<td>[event]</td>
<td><code>string</code></td>
<td><code>"&quot;input&quot;"</code></td>
<td>Il tipo di evento da ascoltare per attivare il binding. Default è "input".</td>
</tr>
<tr>
<td>[twoWayDataBinding]</td>
<td><code>boolean</code></td>
<td><code>true</code></td>
<td>Se <code>true</code>, attiva il binding bidirezionale. Se <code>false</code>, il binding sarà unidirezionale.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><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>
<p><a name="Jdm+jdm_onInput"></a></p>
<h3>jdm.jdm_onInput([fn]) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Aggiunge un listener per l'evento <code>input</code> all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo <code>input</code> sull'elemento.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>[fn]</td>
<td><code>function</code></td>
<td><code>() => {}</code></td>
<td>La funzione di callback da eseguire quando si verifica l'evento <code>input</code>. La funzione riceverà l'evento come parametro.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>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.
</code></pre>
<p><a name="Jdm+jdm_onChange"></a></p>
<h3>jdm.jdm_onChange([fn]) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Aggiunge un listener per l'evento <code>change</code> all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo <code>change</code> sull'elemento.
L'evento <code>change</code> viene attivato quando il valore di un elemento, come un campo di input, viene modificato e l'elemento perde il focus.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>[fn]</td>
<td><code>function</code></td>
<td><code>() => {}</code></td>
<td>La funzione di callback da eseguire quando si verifica l'evento <code>change</code>. La funzione riceverà l'evento come parametro.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>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.
</code></pre>
<p><a name="Jdm+jdm_onSelect"></a></p>
<h3>jdm.jdm_onSelect([fn]) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Aggiunge un listener per l'evento <code>select</code> all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo <code>select</code> sull'elemento.
L'evento <code>select</code> viene attivato quando una parte del testo all'interno di un elemento, come un campo di input o una textarea, viene selezionata dall'utente.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>[fn]</td>
<td><code>function</code></td>
<td><code>() => {}</code></td>
<td>La funzione di callback da eseguire quando si verifica l'evento <code>select</code>. La funzione riceverà l'evento come parametro.</td>
</tr>
</tbody>
</table>
<p><strong>Example</strong></p>
<pre class="prettyprint source lang-js"><code>const input = JDM('<input>', 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.
</code></pre>
<p><a name="Jdm+jdm_onDebounce"></a></p>
<h3>jdm.jdm_onDebounce([fn], [timeout]) ⇒ <a href="#Jdm"><code>Jdm</code></a></h3>
<p>Aggiunge un listener per l'evento <code>input</code> all'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.</p>
<p><strong>Kind</strong>: instance method of <a href="#Jdm"><code>Jdm</code></a><br>
<strong>Returns</strong>: <a href="#Jdm"><code>Jdm</code></a> - - Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>[fn]</td>
<td><code>function</code></td>
<td><code>() => {}</code></td>
<td>La funzione di callback da eseguire quando si verifica l'evento <code>input</code>. L