Untitled

// JavaScript DOM
// kiedy wybieramy element przez id otrzymujemy pojedynczy element i możemy się 
// do niego od razu odwołać w funkcji
const grandparent = document.getElementById("grandparent-id")
// wybranie elementu przez query selector - w nawiasie wpisujemy taką nazwę jaką 
// wpisujemy do style.css, czyli np. jeśli klasa to parent: ".parent" lub jesli 
// id to grandparent-id:
const grandparent = document.querySelector("#grandparent-id")
// wybranie wielu elementów przez query selector all
const parents = document.querySelectorAll(".parent")
const children = document.querySelectorAll(".child")
// lub
const children = grandparent.querySelectorAll(".child")
// wybieranie przez odwołanie się do dzieci danej klasy:
const parents = Array.from(grandparent.children)
// można się też odwoływać do rodzica danej klasy:
const parent = child.parentElement
// wybieranie bliźniaczego elementu
const childOne = document.querySelector("#child-one")
const childTwo = childOne.nextElementSibling
// a jak poprzedni to .previousElementSibling
// kiedy wybieramy element przez klasę otrzymujemy kolekcję elementów - trzeba 
// wtedy najpierw zamienić kolekcję na tablicę i wtedy funkcję wywołać dla 
// każdego elementu: nazwa.forEach(funkcja)
const parents = Array.from(document.getElementsByClassName("parent"))
// funkcja zmieniająca kolor tła
function changeColor(element) {
  element.style.backgroundColor = "#333"
}
// wywołanie funkcji dla pojedycznego elementu (getElementById)
changeColor(grandparent)
// wywołanie funkcji dla każdego elementu klasy (getElementsByClassName)
parents.forEach(changeColor)
// wywołanie funkcji dla elementu query selector
changeColor(grandparent)
// wywoałnie fukcji dla wielu elementów query selector
parents.forEach(changeColor)
changeColor(childOne)
changeColor(childTwo)