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

⛔ Potrzebujesz wsparcia? Oceny CV? A może Code Review? ✅ Dołącz do Discorda!

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

Chcesz zostać (lepszym) programistą i lepiej zarabiać? 

🚀 Porozmawiajmy o nauce programowania, poszukiwaniu pracy, o rozwoju kariery lub przyszłości branży IT!

Umów się na ✅ bezpłatną i niezobowiązującą rozmowę ze mną.

Chętnie porozmawiam o Twojej przyszłości i pomogę Ci osiągnąć Twoje cele! 🎯