JDM — JavaScript DOM Manipulator

Tiny, chainable DOM manipulator. Create elements, query and index children, wire events (incl. a global event bus), animate, and bind form values — all with a fluent jdm_* API on the raw DOM node.

npm install jdm_javascript_dom_manipulator

import "jdm_javascript_dom_manipulator";

JDM("<button>Click</button>", document.body)
    .jdm_addClassList(["btn", "btn-primary"])
    .jdm_onClick(() => console.log("clicked"));

• Docs: full API reference below (generated from JSDoc).
• Changelog: CHANGELOG.md
• Contributing: CONTRIBUTING.md — note the strict backwards-compatibility and deprecation policy.
• Security: SECURITY.md

API Reference

Jdm

Classe Jdm che fornisce un framework per la manipolazione del DOM. Permette di creare un elemento DOM, aggiungerlo a un genitore, assegnargli delle classi e manipolarlo in modo ricorsivo, se richiesto. I metodi della classe sono concatenabili per facilitare le operazioni sul DOM.

INSTALLAZIONE:

NPM

npm install jdm_javascript_dom_manipulator

Esempio di utilizzo classico (da inserire prima degli script che usano JDM):

<script src="./dist/jdm.js"></script>

Esempio di utilizzo di un modulo ES6 (NB: usa jdm.es.js):

import './dist/jdm.es.js';

USO

JDM('div', container, ['fooClass','barClass'])

COMPARAZIONE:

jQuery:

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:

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:

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);

Kind: global class

• Jdm
  • new Jdm([element], [parent], [classList], [deep], [...args])
  • instance
    • .warnDuplicateNames : boolean
    • .version : string
    • .jdm_setAttribute(attribute, [value]) ⇒ Jdm
    • .jdm_getAttribute(attribute) ⇒ string | null
    • .jdm_append(elementList) ⇒ Jdm
    • .jdm_prepend(elementList) ⇒ Jdm
    • .jdm_appendBefore(elementList, elementTarget) ⇒ Jdm
    • .jdm_appendAfter(elementList, elementTarget) ⇒ Jdm
    • .jdm_addId(id) ⇒ Jdm
    • .jdm_addClassList(classList) ⇒ Jdm
    • .jdm_removeClassList(classList) ⇒ Jdm
    • .jdm_toggleClassList(classList) ⇒ Jdm
    • .jdm_findClassList(classList, [some]) ⇒ boolean
    • .jdm_empty() ⇒ Jdm
    • .jdm_destroy() ⇒ Jdm
    • .jdm_validate() ⇒ Jdm
    • .jdm_removeAttribute(attribute) ⇒ Jdm
    • .jdm_setStyle(style, value) ⇒ Jdm
    • .jdm_extendNode(name, [object]) ⇒ Jdm
    • .jdm_innerHTML(value) ⇒ Jdm
    • .jdm_binding(el, [event], [twoWayDataBinding]) ⇒ Jdm
    • .jdm_onInput([fn]) ⇒ Jdm
    • .jdm_onChange([fn]) ⇒ Jdm
    • .jdm_onSelect([fn]) ⇒ Jdm
    • .jdm_onDebounce([fn], [timeout]) ⇒ Jdm
    • .jdm_onClick([fn], [options]) ⇒ Jdm
    • .jdm_onRightClick([fn]) ⇒ Jdm
    • .jdm_onDoubleClick([fn]) ⇒ Jdm
    • .jdm_onInvalid([fn]) ⇒ Jdm
    • .jdm_onLoad([fn]) ⇒ Jdm
    • .jdm_onError([fn]) ⇒ Jdm
    • .jdm_onSubmit([fn]) ⇒ Jdm
    • .jdm_setValue(value, [tooBoolean]) ⇒ Jdm
    • .jdm_getValue() ⇒ any
    • .jdm_genEvent(name, [data], [propagateToParents]) ⇒ Jdm
    • .jdm_addEventListener(name, [fn]) ⇒ Jdm
    • .jdm_removeEventListener(name, [fn]) ⇒ Jdm
    • .jdm_extendChildNode() ⇒ Jdm
    • .jdm_setValueRaw()
    • .jdm_clearAnimations() ⇒ Jdm
    • .jdm_fadeIn([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeInDown([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeInUp([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeInLeft([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeInRight([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeOut([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeOutRight([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeOutUp([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeOutDown([callbackFn], [option]) ⇒ Jdm
    • .jdm_fadeOutLeft([callbackFn], [option]) ⇒ Jdm
    • .jdm_bounce([callbackFn], [option]) ⇒ Jdm
    • .jdm_tada([callbackFn], [option]) ⇒ Jdm
    • .jdm_zoomIn([callbackFn], [option]) ⇒ Jdm
    • .jdm_zoomOut([callbackFn], [option]) ⇒ Jdm
    • .jdm_rotation([callbackFn], [deg], [option]) ⇒ Jdm
  • static
    • .on()
    • .use(plugin) ⇒ Jdm
    • ._invalidateMethodCache()
    • .inspect(node, [depth])

new Jdm([element], [parent], [classList], [deep], [...args])

Crea una nuova istanza della classe Jdm e manipola l'elemento DOM.

Returns: Jdm - - Restituisce il nodo appena creato o manipolato.

| Param | Type | Default | Description | | --- | --- | --- | --- | | [element] | HTMLElement | null | | L'elemento DOM da manipolare. Se non specificato, verrà creato un nuovo nodo. | | [parent] | HTMLElement | null | | Il genitore dell'elemento. Se specificato, l'elemento verrà aggiunto come figlio del genitore. | | [classList] | Array.<string> | null | | Una lista di classi da aggiungere all'elemento. Se specificato, verranno aggiunte le classi