The DOM

Changing classes

const p = document.querySelector('p');

// adding classes
Element.classList.add('.className');
// p.classList.add('red');

// removing classes
Element.classList.remove('.className');
// p.classList.remove('red');

// checkin if a class exists
Element.classList.contains('.className');
// if (p.classList.contains('red')) {
//   console.log("I found a red box!");
// }

// toggling a class
Element.classList.toggle('red');
// p.classList.toggle('red');

Setting and getting CSS properties with JavaScript

// SETTING CSS PROPERTIES
// Variante 1/cssProperty of the style object
Element.style.cssProperty = propertyValue;

button.style.backgroundColor="lavender";
button.style.color="rebeccapurple";

// Variante 2/setProperty method of the style object
// damit können auch CSS custom properties gesetzt werden
Element.style.setProperty('property', 'value');

button.style.setProperty('background-color', 'lavender');
button.style.setProperty('color', 'rebeccapurple');
button.style.setProperty('--box-color', 'lavender');

// GETTING CSS PROPERTIES
// 1. getting inline styles
const myProperty = Element.style.property;

const fontSize = button.style.fontSize;
const color = button.style.color;

// 2. getting computed styles
const style = getComputedStyle(Element, pseudoElement);
const p = getComputedStyle(paragraph, '::before');

// SETTING ATTRIBUTES
Element.setAttribute('name-of-attribute', 'value');
button.setAttribute('type', 'submit');
button.setAttribute('data-color', 'yellow');

// GETTING/READING ATTRIBUTES
Element.getAttribute('name-of-attribute');

// REMOVING ATTRIBUTES
Element.remove('name-of-attribute');

// GETTING and SETTING CUSTOM ATTRIBUTES
// with the dataset object property-value
Element.dataset;
// getting:
console.log(Element.dataset);
// setting:
Element.dataset.color = "limegreen";

// FINDING AN ELEMENTS SIZE AND POSITION
// getBoundingClientsRect method
Element.getBoundingClientRect();

// DOM TRAVERSAL
// 1. DOWNWARDS
// 1.1 el.querySelector, el.querySelectorAll
// searching for a specific room in the house is faster
// than searching from outside (document.querySelector)
// 1.2 children
// this property selects direct descendants (nested
// elements like li in ul) and returns an HTML collection
// 1.3 firstElementChild
// please note the difference to firstChild!
// 2. UPWARDS
// 2.1 parentElement
// this property selects the parent element
// the parent element encloses the current element
// 2.2 closest
// selects an element that can be multiple levels
// above the current element that matches a selector
const closestAncestor = Element.closest(selector);
// closest starts searching from the current element,
// which means that the current element can also be
// selected if the selector matches
// 3. SIDEWAYS
// 3.1 nextElementSibling
// 3.2 previousElementSibling
// 3.3 Combining parentElement, children and index