Document Object Model w JavaScript

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!