Jump to Categories

Vanilla JS

Remove class

document.getElementById('someID').classList.remove('session__info-tab--active');

Add class

document.getElementById('someID').classList.add('session__info-tab--active');

Contains class name

document.getElementById('someID').classList.contains('thatClass')

Select class names

const b = Array.from(document.getElementsByClassName('a'));

Select anything

const navLi = Array.from(document.querySelectorAll('nav > li'));

Add event listener

document.getElementById('test').addEventListener('click', (e) => {
  alert('hello');
})

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

Add event listener to class items

const navdemos = Array.from(document.querySelectorAll('nav.demos > .demo'));

navdemos.forEach(link => link.addEventListener('click', (ev) => {
 ev.preventDefault();
 navigate(ev.target);
}));

Get parent element

document.getElementById('someID').parentElement;
document.getElementById('someID').parentElement.parentElement;

Loop through classes

var dropdowns = document.getElementsByClassName('dropdown');
for (var i = 0; i < dropdowns.length; i++) {
 dropdowns[i].classList.remove('show');
}

Keypress

document.getElementById('menu-btn').addEventListener('keydown', function(e) {
	if(e.keyCode == 9) {
		e.preventDefault();
	}
});

Refs