vanilla.js

  //----Get all divs on page--------- 
 
  /* jQuery */
  $("div")
 
  /* native equivalent */
  document.getElementsByTagName("div") 
 
  //----Get all by CSS class--------- 
 
  /* jQuery */ 
  $(".my-class")
 
  /* native equivalent */
  document.querySelectorAll(".my-class")
 
  /* FASTER native equivalent */
  document.getElementsByClassName("my-class") 
 
  //----Get by CSS selector---------- 
 
  /* jQuery */
  $(".my-class li:first-child")
 
  /* native equivalent */
  document.querySelectorAll(".my-class li:first-child") 
 
  //----Get first by CSS selector----
 
  /* jQuery */
  $(".my-class").get(0)
 
  /* native equivalent */
  document.querySelector(".my-class")

  // get reference to DOM element
  var el = document.querySelector(".main-content");
 
  //----Adding a class------
 
  /* jQuery */
  $(el).addClass("someClass");
 
  /* native equivalent */
  el.classList.add("someClass");
 
  //----Removing a class-----
 
  /* jQuery */
  $(el).removeClass("someClass");
 
  /* native equivalent */
  el.classList.remove("someClass");
 
  //----Does it have class---
 
  /* jQuery */
  if($(el).hasClass("someClass"))
 
  /* native equivalent */
  if(el.classList.contains("someClass"))

  // get reference to a DOM element
  var el = document.querySelector(".main-content");
 
  //----Setting multiple CSS properties----
 
  /* jQuery */
  $(el).css({
    background: "#FF0000",
    "box-shadow": "1px 1px 5px 5px red",
    width: "100px",
    height: "100px",
    display: "block"
  });
 
  /* native equivalent */
  el.style.background = "#FF0000";
  el.style.width = "100px";
  el.style.height = "100px";
  el.style.display = "block";
  el.style.boxShadow = "1px 1px 5px 5px red";