Uwaga! Trwają prace nad nową wersją serwisu. Mogą występować przejściowe problemy z jego funkcjonowaniem. Przepraszam za niedogodności!

DOM w JavaScript

Dowiedz się, czym jest i jak skutecznie z niego korzystać!

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.

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 newslettera.

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!

  • Masz trudności z organizacją nauki.
  • Brakuje Ci praktycznych zadań.
  • Doszedłeś do ściany i nie możesz ruszyć z miejsca.

Brzmi znajomo?