Document Object Model w JavaScript
Chcesz dowiedzieć się czym jest DOM w JavaScript? Ten materiał jest dla Ciebie!
2020-07-01
DOM (ang. Document Object Model) to reprezentacja kodu źródłowego, który jest zorganizowany w formie drzewa. Drzewo to struktura danych, która z racji swojej budowy przyśpiesza poruszanie się po nim. W matematyce taka struktura nosi nazwę grafu.
Na temat DOM w JavaScript nagrałem webinar, w którym skupiam się na praktycznym wykorzystaniu dostępnych rozwiązań. Intro do webinar-u możesz zobaczyć poniżej.
Cały materiał trwa 85 minut i obejmuje poniższe zagadnienia:
- Czym jest DOM?
- Wyszukiwanie elementów
- .querySelector() vs .getElementById()
- .querySelectorAll() vs .getElementsBy*()
- Brak elementu/ów wyszukiwania
- Łączenie wyszukiwań
- Sposoby dołączania plików JS do HTML przy pomocy znacznika script
- Operacje na elementach
- Pobieranie nazwy znacznika tj. .tagName
- Czym są atrybuty?
- Pobieranie wartości atrybutu – getAttribute()
- Ustawianie wartości atrybutu – setAttribute()
- Sprawdzanie czy atrybut istnieje – hasAttribute()
- Wiele elementów i zarządzanie atrybutami
- Właściwość / Obiekt .dataset
- Identyfikatory (atrybut id)
- Klasy
- Właściwość .className
- Zarządzanie klasami przy pomocy .classList
- Zawartość elementów
- .innerText
- .textContent vs .innerText
- .innerHTML
- Właściwość style tj. definiowanie wyglądu elementów
- getComputedStyle() – pobieranie styli dla elementów
- .style.setProperty() – ustawianie wartości zmiennych z CSS
- Zarządzanie elementami
- Tworzenie elementów tj. document.createElement()
- Osadzanie elementów tj. appendChild(), insertBefore(), replaceChild()
- Kopia elementu (klonowanie) – .cloneNode()
- Usuwanie elementów tj. .removeChild() oraz remove()
- Poruszanie się po DOM
- Cofnięcie się do rodzica tj. .parentElement
- Poruszanie się poziome tj .nextElementSibling oraz .prevousElementSibling
- .nextElementSibling vs .nextSibling
- Pobranie wszystkich dzieci elementu tj. .children
- Sprawdzanie czy dzieci występuję tj. .hasChildNodes()
Jeśli chcesz zapoznać się z całym nagraniem to zapraszam Cię do zapisania się do newsletter-a.
Za jego pomocą wysyłam informacje na temat planowanych wydarzeń oraz rozsyłam linki do nagrań. Co drugi dzień jest wysyłany link do kolejnego materiału.
Film na temat DOM w JavaScript jest piąty (#05) w kolejności więc otrzymasz go za około 10 dni. Zapraszam!
Najnowsze komentarze