====== Lets avoid jQuery ======
  * https://htmldom.dev/  
  * http://youmightnotneedjquery.com/
  * https://github.com/nefe/You-Dont-Need-jQuery | {{:wiki2:js:you-dont-need-jquery-master.zip|}}
  * https://news.ycombinator.com/item?id=19534060

===== Vanilla =====

Foreach:
<code>
the_array.forEach(function(element) {
  console.log(element);
});
</code>

===== Typical jQuery =====
OnDocumentLoad:
<code>
(function() {
   // your page initialization code here
   // the DOM will be available here
})();
</code>
If supported, it tries the standard:
<code>document.addEventListener('DOMContentLoaded', fn, false);</code>
with a fallback to:
<code>
window.addEventListener('load', fn, false )
</code>
or for older versions of IE, it uses:
<code>
document.attachEvent("onreadystatechange", fn);
</code>
with a fallback to:
<code>
window.attachEvent("onload", fn);
</code>
===== Selectores =====

document.getElementsByClassName('test')

document.getElementsByClassName('red test')

document.getElementById('main').getElementsByClassName('test')

document.getElementsByName(elementsName);

document.getElementById(resultId)

document.getElementsByTagName('span')[0];

var i = btn.getElementsByTagName('i');
===== Elementos en el DOM =====

Crear elemento: ''var d = document.createElement('div');''

Acceder al padre: ''e.parentNode''


===== Clases y CSS =====
document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') ) document.getElementById("MyElement").classList.toggle('MyClass');

To replace all existing classes with one or more new classes, set the className attribute: ''document.getElementById("MyElement").className = "MyClass";''

To add an additional class to an element: ''document.getElementById("MyElement").className += " MyClass";''


===== Eventos =====
Add event: '' document.getElementById('the_id').setAttribute('onchange', 'javascript:loadElements(this, event);');''

==== Bloquear ====
<code javascript>
    function filterKeys(ctrl, event) {
        if (event.key === ',') event.preventDefault();
    }
    <input type="text" value="tralara" width="100px" onkeydown="filterKeys(this, event)" />
</code>

Also: ''event.stopPropagation()''
===== Propiedades =====

==== dataset ====
<code>
<p id="parraf" data-id="1" data-source="component" .../>
</code>
Luego para acceder:
<code>
var identifier = document.getElementsById('parraf').dataset.id;
</code>

===== Eventos =====

<code>
<... onchange="javascript:manageCheck(this, event);" />

function manageCheck(element, event) {
  event.stopPropagation();
}
</code>

===== Requests =====
<code>
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        var resp = request.responseText;
        modalDiv.innerHTML = resp;
        $(modalDivId).modal('show');
      } else {
      }
    };
    request.send();
</code>

===== JSON =====
<code>
var elems = [];
elems.push('1');
elems.push('2');
elems.push('3');
$('#input_hidden_field').val(JSON.stringify(elems)); //store array
var value = $('#input_hidden_field').val(); //retrieve array
value = JSON.parse(value);
</code>

===== Notes =====
==== Replace a tag ====
<code>
var e = document.getElementsByTagName('span')[0];
var d = document.createElement('div');
d.innerHTML = e.innerHTML;
e.parentNode.replaceChild(d, e);
</code>