====== Vanilla JS alternativen zu jQuery ======

Auf der Seite [[https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/|"move from jquery to vanilla javascript"]] sind ein paar tolle Beispiele, wie man auf jQuery verzichten kann. Die wichtigsten die ich immer wieder brauche (und nachschlage), habe ich hier her kopiert.

**Custom Event triggern**

<code javascript>
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));
</code>

**Funktion auf alle Elemente eine Node-List anwenden**

<code javascript>
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" }
</code>

**Stabile onReady Funktion**

Achtung: Arrow Funktionen gehen nicht im IE10

<code javascript>
var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}

ready(() => { 
  /* Do things after DOM has fully loaded */ 
});
</code>

**Arbeiten mit Klassen**

<code javascript>
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");
box.classList.replace("focus", "blurred");

var has_class = box.classList.contains("focus"); //bool
</code>