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)