Vanilla JS alternativen zu jQuery

Auf der Seite "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

document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

Funktion auf alle Elemente eine Node-List anwenden

document.querySelectorAll(".box").forEach(box => { box.style.display = "none" }

Stabile onReady Funktion

Achtung: Arrow Funktionen gehen nicht im IE10

var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}
 
ready(() => { 
  /* Do things after DOM has fully loaded */ 
});

Arbeiten mit Klassen

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

Page Tools