DOM (Document Object Model) to drzewiasta reprezentacja kodu HTML, po której możesz się poruszać i którą możesz modyfikować z poziomu JavaScriptu. Nagranie pokazuje m.in. wyszukiwanie elementów (querySelector, getElementById), zarządzanie ich atrybutami, klasami i zawartością oraz tworzenie, klonowanie i usuwanie elementów, a także poruszanie się po drzewie DOM.
Cały materiał trwa 85 minut i obejmuje poniższe zagadnienia:
Czego się nauczysz z tego nagrania
- 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()
Gdy wstawiasz do strony tekst wpisany przez użytkownika, użyj textContent zamiast .innerHTML. Dlaczego, wyjaśnia artykuł o XSS w JavaScripcie.
