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

🔥 Zgarnij PŁATNY STAŻ w 3 edycji kursu programowania front end (zapisy do 22.01) 🔥

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!

Udostępnij ten artykuł:

Mentoring to efektywna nauka pod okiem doświadczonej osoby, która:

  • przekazuje Ci swoją wiedzę i nadzoruje Twoje postępy w zdobywaniu umiejętności,
  • uczy Cię dobrych praktyk i wyłapuje złe nawyki,
  • wspiera Twój rozwój i zwiększa zaangażowanie w naukę.

Mam coś dla Ciebie!

W każdy piątek rozsyłam motywujący do nauki programowania newsletter!

Dodatkowo od razu otrzymasz ode mnie e-book o wartości 39 zł. To ponad 40 stron konkretów o nauce programowania i pracy w IT.

PS Zazwyczaj wysyłam 1-2 wiadomości na tydzień. Nikomu nie będę udostępniał Twojego adresu e-mail.