Kolekcje węzłów DOM

Typy węzłów

• element node
• attribute node
• text node
• comment node

NodeList

Uporządkowana lista wszystkich węzłów DOM (w tym również węzłów tekstowych oraz bloków tekstowych), obiekty można uzyskać poprzez odwołanie się do indeksu

querySelectorAll()/getElementsByName() - - metody document zwracające NodeList

NodeList posiada metodę forEach() !!

NodeList, jest static - zwrócona lista …

Propagacja wydarzeń (w górę) - event bubbling

W DOM domyślnie wydarzenia są przenoszone od dziecka lub rodzeństwa do rodzica lub rodzeństwa - oznacza to, że jeśli rodzic oraz dziecko mają nastawioną ten sam rodzaj akcji wywołującej (np. click) oraz różne lub tą samą wydarzenie wywołane, oba z nich dojdą do skutku chyba …

Nasłuchiwacz wydarzeń ;)

Aby dodać interakcji do strony internetowej przy pomocy JS należy do wybranego przez siebie elementu dołączyć tzw. 'nasłuchiwacz wydarzeń' (ang. event listener)

.addEventListener(wydarzenie, funkcja-przekazana-do-wywołania) - ta metoda przyjmuje dwa argumenty rodzaj 1) rodzaj wydarzenia np. 'click' (kliknięcie myszy) oraz 2) funkcję jaka ma się wywołać w momencie jego …

DOMContentLoaded

Na początek warto pamiętać o wydarzeniu DOMContentLoaded - nasłuchuje przeładowania przeglądarki -> pozwala na wywołanie funkcji zmieniającej elementy DOM w momencie załadowania całości drzewa DOM (jest to istotne w momencie gdy plik zawierający skrypt js jest podlinkowany w zamiast po )

Przykładowe zastosowanie "zamknięcie" zmian w bloku/funkcji -> w momencie przeładowania przeglądarki …

DOM - document object model

Selektory pojedynczych elementów

:::Istnieje możliwość łączenia selektorów z atrybutami :::

Przykładowe zastosowanie

document.getElementById('button-4').className // zwraca …