Vanilla JavaScript Cheat Sheet

js-cheatsheet.js

/**

I always forgot these simple javascript methods. 
So I can refer this anytime. 

Surjith S M / @surjithctly

**/
//---------------------------------------------------------------------
// Javascript get element by ID

const element = document.getElementById("intro");


//---------------------------------------------------------------------
// Javascript get element by Class Name

const element = document.getElementsByClassName("menu");


//---------------------------------------------------------------------
// Javascript get element by Tag Name

const element = document.getElementsByTagName("p");


//---------------------------------------------------------------------
// Javascript query Selector

const element = document.querySelectorAll(".example");
const element = document.querySelectorAll("p.intro");

const matches = document.querySelectorAll("div.note, div.alert");

const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");


//---------------------------------------------------------------------
//  Javascript On Click Toggle Class

document.getElementById("menu").onclick = function () {
  this.classList.toggle("active");
};

//---------------------------------------------------------------------
// Changing Class Names in JavaScript

document.getElementById("container").classList.add('block');

document.getElementById("container").classList.remove('hidden');

if ( document.getElementById("container").classList.contains('is-mobile') )

document.getElementById("container").classList.toggle('active');


//---------------------------------------------------------------------
// Javascript Click Event Listener

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

//---------------------------------------------------------------------
// Javascript Click Event Listener as a function

document.addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

// List of Events
// https://developer.mozilla.org/en-US/docs/Web/Events


//---------------------------------------------------------------------
//