Untitled
javascript
2 months ago
1.9 kB
1
Indexable
Never
// 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)