PiskorowskiJakub.pl

Wszystkie kursy Podstawy tworzenia stron JS - Podstawy DOM

JS - Podstawy DOM

Opis: Zostaną omówione podstawowe metody wyszukiwania i modyfikowania elementów w JavaScript, w tym wybieranie elementów, zmiana ich zawartości i atrybutów, wykorzystanie właściwości stylów oraz najważniejsze właściwości elementów i dokumentu.

DOM w języku JavaScript

Czym jest DOM

DOM (ang. Document Object Model) to model obiektowy dokumentu HTML.
Można powiedzieć, że przeglądarka przekształca każdą stronę HTML w strukturę przypominającą drzewo - gdzie każdy element (np. <p>, <div>, <img>) staje się obiektem, który można odczytywać i modyfikować za pomocą języka JavaScript.

Dzięki DOM, JavaScript ma dostęp do całej struktury strony - może odczytywać, zmieniać, dodawać lub usuwać elementy, a także reagować na działania użytkownika (kliknięcia, wpisywanie tekstu, przewijanie itd.).

Przykładowa struktura DOM dla prostego dokumentu:

<html>
  <body>
    <h1>Witaj na stronie!</h1>
    <p>To jest przykładowy akapit.</p>
  </body>
</html>

JavaScript "widzi" tę stronę jako drzewo obiektów:

document
 └── html
     └── body
         ├── h1
         └── p

Każdy z tych elementów można pobrać (wybrać) i zmienić, np. zmienić tekst w nagłówku lub kolor akapitu.

Autor: Jakub Piskorowski
Data stworzenia: 16.11.2025

Wybieranie elementów w DOM

Aby pracować z elementami strony, trzeba je najpierw wybrać (pobrać) z drzewa DOM.
JavaScript udostępnia kilka metod służących do odnajdywania elementów w dokumencie.

1. getElementById()

Służy do pobierania pojedynczego elementu na podstawie jego identyfikatora (id).
Jeśli na stronie znajduje się element z danym id, metoda zwróci jego obiekt DOM.
Jeśli nie - zwróci null.

Składnia:

document.getElementById("nazwaId");

Przykład:

<p id="opis">To jest tekst akapitu.</p>

<script>
  const element = document.getElementById("opis");
  element.style.color = "blue"; // zmiana koloru tekstu
</script>

W tym przykładzie JavaScript wybiera element <p> o identyfikatorze opis i zmienia jego kolor tekstu na niebieski.

2. getElementsByClassName()

Ta metoda zwraca kolekcję elementów (tzw. HTMLCollection), które mają określoną klasę CSS.
Ponieważ może istnieć wiele elementów z tą samą klasą, wynik trzeba często przetwarzać w pętli.

Składnia:

document.getElementsByClassName("nazwaKlasy");

Przykład:

<p class="tekst">Pierwszy</p>
<p class="tekst">Drugi</p>

<script>
  const paragrafy = document.getElementsByClassName("tekst");
  paragrafy[0].style.color = "red"; // zmiana koloru pierwszego
  paragrafy[1].style.color = "green"; // zmiana koloru drugiego
</script>

3. getElementsByTagName()

Pozwala pobrać wszystkie elementy o danym znaczniku HTML, np. wszystkie <p>, <div>, <li> itd.
Zwraca kolekcję (HTMLCollection) podobnie jak metoda wyżej.

Składnia:

document.getElementsByTagName("nazwaTagu");

Przykład:

<p>Pierwszy</p>
<p>Drugi</p>

<script>
  const paragrafy = document.getElementsByTagName("p");
  for (let i = 0; i < paragrafy.length; i++) {
    paragrafy[i].style.fontWeight = "bold"; // pogrubienie każdego
  }
</script>

4. getElementsByName()

Zwraca wszystkie elementy, które mają atrybut name o podanej wartości. Wynikiem jest kolekcja NodeList-like(HTMLCollection), którą można przeglądać np. pętlą for...of.

Składnia:

document.getElementsByName("nazwa");

Przykład:

<input type="radio" name="kolor" value="red">
<input type="radio" name="kolor" value="green">
<input type="radio" name="kolor" value="blue">

<script>
  const opcje = document.getElementsByName("kolor");
  for (const opcja of opcje) {
    opcja.onclick = () => console.log(opcja.value);
  }
</script>

5. querySelector()

Zwraca pierwszy element, który pasuje do selektora CSS (np. #id, .klasa, div p, [name="login"] itp.).
Jest bardzo elastyczna, bo pozwala używać tych samych reguł, które stosujesz w arkuszach CSS.

Składnia:

document.querySelector("selektorCSS");

Przykład:

<div class="box">
  <p class="tekst">Witaj!</p>
</div>

<script>
  const akapit = document.querySelector(".box .tekst");
  akapit.textContent = "Zmieniony tekst!";
</script>

Tutaj querySelector() znalazł pierwszy akapit .tekst znajdujący się wewnątrz .box i zmienił jego zawartość tekstową.

5. querySelectorAll()

Działa podobnie do querySelector(), ale zwraca wszystkie pasujące elementy w postaci NodeList (można używać np. forEach).

Składnia:

document.querySelectorAll("selektorCSS");

Przykład:

<ul>
  <li class="item">Jeden</li>
  <li class="item">Dwa</li>
  <li class="item">Trzy</li>
</ul>

<script>
  const elementy = document.querySelectorAll(".item");
  elementy.forEach(li => li.style.color = "purple");
</script>

Porównanie metod

Metoda	Zwraca	Wyszukiwanie	Zastosowanie
getElementById()	Jeden element	po id	Gdy znamy unikalny identyfikator
getElementsByClassName()	Kolekcję	po klasie	Gdy wiele elementów ma tę samą klasę
getElementsByTagName()	Kolekcję	po znaczniku HTML	Gdy chcemy pobrać wszystkie elementy danego typu
getElementsByName()	Kolekcję (HTMLCollection)	po atrybucie name	Gdy elementy mają wspólną nazwę - np. pola formularzy
querySelector()	Pierwszy pasujący	po selektorze CSS	Gdy chcemy łatwo odwołać się do elementu jak w CSS
querySelectorAll()	Wszystkie pasujące (NodeList)	po selektorze CSS	Gdy chcemy wybrać i przetwarzać wiele elementów

Autor: Jakub Piskorowski
Data stworzenia: 16.11.2025

Zmiana zawartości elementów w DOM

Wprowadzenie

Po wybraniu elementu w strukturze DOM, możemy modyfikować jego zawartość - czyli zmieniać tekst, dodawać HTML lub aktualizować wartość pól formularzy.
Do tego służą m.in. właściwości:

innerHTML
textContent
value

Każda z nich działa nieco inaczej i ma swoje typowe zastosowania.

1. innerHTML

Właściwość innerHTML pozwala odczytać lub zmienić zawartość elementu w formie kodu HTML.
Możemy dzięki niej wstawić nowe znaczniki HTML, które przeglądarka zinterpretuje i wyświetli.

Składnia:

element.innerHTML
element.innerHTML = "nowa zawartość";

Przykład:

<div id="opis">To jest <b>ważny</b> tekst.</div>

<script>
  const element = document.getElementById("opis");
  element.innerHTML = "Zmieniony <i>opis</i> strony.";
</script>

Wynik:
Tekst w <div> zostanie zamieniony na "Zmieniony opis strony.”, przy czym słowo opis zostanie zapisane kursywą, bo wstawiliśmy znacznik <i>.

Uwaga:
innerHTML potrafi wstawiać kod HTML, ale trzeba uważać, by nie używać go do wstawiania niesprawdzonych danych od użytkownika - może to prowadzić do luk bezpieczeństwa (XSS - cross-site scripting).

2. textContent

Właściwość textContent służy do odczytania lub zmiany czystego tekstu elementu - bez interpretowania znaczników HTML.
Przeglądarka potraktuje wszystko, co wpiszesz, jako zwykły tekst.

Składnia:

element.textContent
element.textContent = "Nowy tekst";

Przykład:

<p id="akapit">To jest <b>tekst</b>.</p>

<script>
  const p = document.getElementById("akapit");
  p.textContent = "Nowy tekst bez znaczników.";
</script>

Wynik:
Na stronie pojawi się zwykły tekst:
Nowy tekst bez znaczników.
- wszystkie wcześniejsze znaczniki HTML zostały zastąpione tekstem.

Różnica względem innerHTML:

innerHTML może dodawać znaczniki HTML,
textContent traktuje wszystko jako tekst (bez formatowania).

3. value

Właściwość value odnosi się do elementów formularzy, takich jak:
<input>, <textarea>, <select>.
Pozwala odczytać aktualnie wpisaną wartość lub ustawić nową.

Składnia:

element.value
element.value = "nowa wartość";

Przykład:

<input type="text" id="imie" value="Jan">

<script>
  const pole = document.getElementById("imie");
  console.log(pole.value); // wypisze: Jan
  pole.value = "Kasia"; // zmienia zawartość pola na 'Kasia'
</script>

Wynik:
W polu tekstowym zobaczymy wpisane imię "Kasia".

4. attribute_name (np. element.src, element.href, element.id)

Pozwala pobrać lub ustawić wartość konkretnego atrybutu HTML bezpośrednio przez właściwość obiektu. Najczęściej stosowane przy src, href, id, className, type.

Przykład:

<img id="logo" src="old.png">

<script>
  const obraz = document.getElementById("logo");
  console.log(obraz.src);        // odczyt
  obraz.src = "new.png";         // ustawienie
</script>

5. setAttribute()

Ustawia dowolny atrybut na wskazanym elemencie - nawet taki, którego nie ma jako właściwości JS.

Składnia:

element.setAttribute("nazwa", "wartość");

Przykład:

<button id="btn">Kliknij</button>

<script>
  const b = document.getElementById("btn");
  b.setAttribute("title", "Podpowiedź dla użytkownika");
</script>

Porównanie właściwości

Właściwość / Metoda	Zastosowanie	Zwraca / ustawia	Obsługuje HTML	Przykład elementu
innerHTML	zawartość elementu	tekst + kod HTML	tak	`<div>`, `<p>`, `<span>`
textContent	sam tekst elementu	czysty tekst	nie	`<p>`, `<h1>`, `<li>`
value	wartość elementów formularza	tekst użytkownika	nie	`<input>`, `<textarea>`, `<select>`
attribute_name	odczytywanie lub ustawianie konkretnego atrybutu bezpośrednio przez nazwę	wartość atrybutu jako tekst	tak (dla atrybutów HTML)	np. `img.src`, `a.href`, `input.type`
setAttribute()	ustawianie dowolnego atrybutu w elemencie	ustawia wartość atrybutu (string)	tak	każdy element, np. `<img>`, `<a>`, `<button>`

Autor: Jakub Piskorowski
Data stworzenia: 16.11.2025

Modyfikacja stylów w DOM

Wprowadzenie

Po wybraniu elementu w strukturze DOM, możemy zmieniać nie tylko jego zawartość, ale także wygląd (style CSS) bezpośrednio z poziomu JavaScript. Dzięki temu strona może reagować dynamicznie na działania użytkownika - np. po kliknięciu przycisku, element zmienia kolor, rozmiar, tło lub inne właściwości.

Modyfikacja stylów odbywa się najczęściej przez właściwość style, która odnosi się do atrybutu style danego elementu HTML.

1. Właściwość `element.style`

Każdy element DOM ma obiekt style, w którym znajdują się wszystkie właściwości CSS możliwe do ustawienia z poziomu JavaScript. Każda z tych właściwości odpowiada nazwie stylu w CSS, ale zapisywana jest w formacie camelCase (bez myślników).

Przykłady konwersji nazw CSS na JavaScript:

CSS	JavaScript (`element.style...`)
background-color	style.backgroundColor
font-size	style.fontSize
border-radius	style.borderRadius

Ustawianie stylów elementu

Aby zmienić styl elementu, należy:

Wybrać element (np. przez getElementById lub querySelector),
Odwołać się do jego właściwości style,
Nadać nową wartość.

Składnia:

element.style.nazwaWłasności = "wartość";

Przykład 1 - zmiana koloru tekstu

<p id="tekst">Witaj na stronie!</p>

<script>
  const p = document.getElementById("tekst");
  p.style.color = "red"; // zmiana koloru tekstu
</script>

Wynik:
Tekst "Witaj na stronie!" będzie wyświetlony na czerwono.

Przykład 2 - kilka zmian stylów naraz

<div id="box">To jest przykładowy blok</div>

<script>
  const box = document.getElementById("box");
  box.style.backgroundColor = "lightblue";
  box.style.padding = "20px";
  box.style.borderRadius = "10px";
  box.style.textAlign = "center";
</script>

Wynik:
Blok <div> zyska jasnoniebieskie tło, zaokrąglone rogi, wewnętrzne odstępy i wyśrodkowany tekst.

Przykład 3 - dynamiczna zmiana po kliknięciu

<button id="przycisk">Zmień kolor</button>
<p id="akapit">To jest tekst akapitu.</p>

<script>
  const btn = document.getElementById("przycisk");
  const p = document.getElementById("akapit");

  btn.onclick = () => {
    p.style.color = "green";
    p.style.fontSize = "20px";
  };
</script>

Wynik:
Po kliknięciu przycisku akapit zmieni kolor tekstu na zielony i powiększy czcionkę.

Usuwanie i odczytywanie stylów

Aby odczytać styl, wystarczy użyć:

console.log(element.style.color);

Aby usunąć wcześniej nadany styl:

element.style.color = "";

Warto wiedzieć:
Jeśli styl jest ustawiony w zewnętrznym arkuszu CSS (a nie bezpośrednio w style elementu), element.style nie pokaże tej wartości.
Aby odczytać aktualny, obliczony styl, użyj funkcji:

getComputedStyle(element).color;

Dodawanie lub usuwanie klas CSS

Alternatywnie do bezpośrednich stylów można manipulować klasami CSS przy pomocy właściwości classList. To bezpieczniejszy i czytelniejszy sposób, gdy stylów jest dużo.

Najważniejsze metody:

element.classList.add("nazwa-klasy") - dodaje klasę
element.classList.remove("nazwa-klasy") - usuwa klasę
element.classList.toggle("nazwa-klasy") - przełącza (dodaje lub usuwa)

Przykłady

element.classList.add("nazwa-klasy") - dodaje klasę

const box = document.getElementById("box");
box.classList.add("highlight");

Wyjaśnienie:
Do elementu o identyfikatorze box zostanie dodana klasa CSS highlight.
Jeśli wcześniej jej nie miał, teraz zacznie dziedziczyć styl zdefiniowany dla tej klasy.

element.classList.remove("nazwa-klasy") - usuwa klasę

const box = document.getElementById("box");
box.classList.remove("highlight");

Wyjaśnienie:
Usuwa z elementu klasę highlight, przez co przestanie obowiązywać styl przypisany do tej klasy.

element.classList.toggle("nazwa-klasy") - przełącza klasę

const box = document.getElementById("box");
box.classList.toggle("highlight");

Wyjaśnienie:
Jeśli element ma klasę highlight, zostanie ona usunięta, jeśli nie ma, zostanie dodana.
Ta metoda świetnie sprawdza się np. przy kliknięciach w przyciski, które zmieniają wygląd elementu (np. pokazują/ukrywają coś lub podświetlają).

Porównanie metod modyfikacji stylu

Metoda	Działanie	Zalety	Wady
element.style	Ustawia styl bezpośrednio w atrybucie style	Szybka i prosta zmiana pojedynczego stylu	Trudna w utrzymaniu przy wielu zmianach
classList.add/remove/toggle	Dodaje lub usuwa klasy CSS	Oddzielenie stylu od logiki JS, czytelność	Wymaga wcześniejszego zdefiniowania klas w CSS
getComputedStyle()	Odczytuje aktualny styl z arkusza CSS	Pozwala sprawdzić faktyczne wartości	Tylko do odczytu, nie do zmiany

Autor: Jakub Piskorowski
Data stworzenia: 22.10.2025

Podstawowe właściwości elementów i dokumentu

Są to najczęściej używane właściwości ułatwiające dostęp do treści strony, jej struktury oraz wartości formularzy. Pozwalają pobierać lub modyfikować zawartość dokumentu oraz stan poszczególnych elementów.

1. document.title

Służy do odczytywania lub ustawiania tytułu strony widocznego na karcie przeglądarki.

Składnia:

document.title
document.title = "Nowy tytuł strony";

Przykład:

document.title = "Panel administracyjny";

2. document.body

Zwraca główny element <body> dokumentu. Umożliwia m.in. dodawanie, usuwanie i modyfikację elementów na stronie.

Składnia:

document.body

Przykład:

document.body.style.background = "lightblue";

3. element.src

Służy do odczytu lub ustawienia źródła grafiki, skryptu lub ramki.

Składnia:

element.src
element.src = "nowy_obrazek.png";

Przykład:

const img = document.getElementById("logo");
img.src = "logo2.png";

4. element.checked

Sprawdza lub zmienia zaznaczenie checkboxa lub radia.

Składnia:

element.checked
element.checked = true;

Przykład:

const zgoda = document.getElementById("regulamin");
if (zgoda.checked) console.log("Zaakceptowano regulamin");

Porównanie:

Właściwość	Zastosowanie	Zwraca / ustawia	Obsługuje HTML	Przykład elementu
document.title	tytuł strony	tekst	nie	dokument
document.body	główny obszar strony	element <body>	tak	dokument
src	adres obrazka, skryptu itp.	ścieżka do pliku	tak	<img>, <script>, <iframe>
checked	stan zaznaczenia	true / false	nie	<input type="checkbox">, <input type="radio">

Autor: Jakub Piskorowski
Data stworzenia: 16.11.2025

Zadania - Obsługa elementów DOM

Zadanie 1 - Wybieranie elementu po identyfikatorze

Napisz skrypt, który pobierze element o określonym identyfikatorze i zmieni jego zawartość.

<h1 id="naglowek">Witaj!</h1>

Polecenia:

Pobierz element h1 za pomocą getElementById("naglowek").
Zmień jego tekst na "Witaj w świecie DOM!".

Efekt:
Na stronie powinien pojawić się nagłówek z nowym tekstem.

Zadanie 2 - Wybieranie elementów po klasie

Napisz skrypt, który zmieni treść wszystkich akapitów o tej samej klasie.

<p class="tekst">To jest pierwszy akapit.</p>
<p class="tekst">To jest drugi akapit.</p>
<p class="tekst">To jest trzeci akapit.</p>

Polecenia:

Pobierz wszystkie elementy o klasie tekst przy użyciu getElementsByClassName().
W pętli zmień zawartość każdego akapitu na "Zmieniony akapit".

Efekt:
Każdy akapit wyświetla tekst: "Zmieniony akapit".

Zadanie 3 - Wybieranie elementów po znaczniku

Użyj metody getElementsByTagName() do pobrania wszystkich nagłówków i zmiany ich zawartości.

<h2>Nagłówek 1</h2>
<h2>Nagłówek 2</h2>
<h2>Nagłówek 3</h2>

Polecenia:

Pobierz wszystkie elementy <h2>.
Zmieniaj ich tekst w pętli, dodając numer np. "Zmieniony nagłówek 1", "Zmieniony nagłówek 2", itd.

Zadanie 4 - querySelector i querySelectorAll

Napisz skrypt, który wybierze pojedynczy element oraz wiele elementów za pomocą selektorów CSS.

<div class="blok">
  <p>Pierwszy akapit</p>
  <p>Drugi akapit</p>
</div>

Polecenia:

Użyj querySelector(), aby pobrać pierwszy akapit i zmień jego tekst.
Użyj querySelectorAll(), aby pobrać wszystkie akapity i zmienić ich kolor tekstu na czerwony.

Zadanie 5 - Zmiana zawartości elementów

Ćwicz różne sposoby zmiany zawartości.

<h1 id="tytul">Stary tytuł</h1>
<p id="opis">Opis początkowy</p>
<input type="text" id="pole" value="Stara wartość">

Polecenia:

Zmień textContent nagłówka na "Nowy tytuł".
Zmień innerHTML akapitu, np. na <strong>Nowy opis w HTML</strong>.
Zmień wartość pola tekstowego (value) na "Nowa wartość".

Zadanie 6 - Modyfikacja stylów elementów

Napisz skrypt, który zmienia style za pomocą właściwości style.

<p id="tekst">To jest akapit.</p>

Polecenia:

Pobierz akapit.
Ustaw kolor tekstu na niebieski.
Zmień rozmiar czcionki na 24px.

Zadanie 7 - Dodawanie i usuwanie klas CSS

Napisz skrypt, który manipuluje klasami za pomocą classList.

<button id="przycisk" class="zielony">Kliknij mnie</button>

Polecenia:

Użyj classList.add("aktywny"), aby dodać nową klasę.
Użyj classList.remove("zielony"), aby usunąć istniejącą.
Użyj classList.toggle("aktywny"), aby przełączać klasę.

Efekt:
Po każdorazowym wywołaniu toggle klasa zmienia się - można to zobaczyć w inspektorze elementów.

Zadanie 8 - Odczytywanie stylów z getComputedStyle()

Ustal, jaki kolor ma dany element na stronie.

<p id="tekst" style="color: green;">Przykładowy tekst</p>

Polecenia:

Pobierz element p.
Użyj getComputedStyle(element) i wyświetl w konsoli wartość color.

Efekt:
W konsoli powinien pojawić się tekst:
Kolor tekstu: rgb(0, 128, 0)

Zadanie 9 - Mini projekt podsumowujący

Połącz wszystkie poznane techniki.

<h1 id="tytul">Tytuł strony</h1>
<p class="opis">Pierwszy opis</p>
<p class="opis">Drugi opis</p>
<input type="text" id="pole" value="Domyślny tekst">
<button id="przycisk">Zmień zawartość</button>

Polecenia:

Po kliknięciu przycisku:
- zmień tekst nagłówka (textContent),
- zmień treść pierwszego akapitu (innerHTML),
- zmień wartość w polu tekstowym (value),
- dodaj nową klasę do nagłówka (classList.add()),
- zmień kolor tekstu (style.color),
- wypisz do konsoli kolor nagłówka przy użyciu getComputedStyle().

Autor: Jakub Piskorowski
Data stworzenia: 12.11.2025

JS - Podstawy DOM

DOM w języku JavaScript

Czym jest DOM

Wybieranie elementów w DOM

1. getElementById()

2. getElementsByClassName()

3. getElementsByTagName()

4. getElementsByName()

5. querySelector()

5. querySelectorAll()

Porównanie metod

Zmiana zawartości elementów w DOM

Wprowadzenie

1. innerHTML

2. textContent

3. value

4. attribute_name (np. element.src, element.href, element.id)

5. setAttribute()

Porównanie właściwości

Modyfikacja stylów w DOM

Wprowadzenie

1. Właściwość element.style

Ustawianie stylów elementu

Przykład 1 - zmiana koloru tekstu

Przykład 2 - kilka zmian stylów naraz

Przykład 3 - dynamiczna zmiana po kliknięciu

Usuwanie i odczytywanie stylów

Dodawanie lub usuwanie klas CSS

Porównanie metod modyfikacji stylu

Podstawowe właściwości elementów i dokumentu

1. document.title

2. document.body

3. element.src

4. element.checked

Porównanie:

Zadania - Obsługa elementów DOM

Zadanie 1 - Wybieranie elementu po identyfikatorze

Zadanie 2 - Wybieranie elementów po klasie

Zadanie 3 - Wybieranie elementów po znaczniku

Zadanie 4 - querySelector i querySelectorAll

Zadanie 5 - Zmiana zawartości elementów

Zadanie 6 - Modyfikacja stylów elementów

Zadanie 7 - Dodawanie i usuwanie klas CSS

Zadanie 8 - Odczytywanie stylów z getComputedStyle()

Zadanie 9 - Mini projekt podsumowujący

1. Właściwość `element.style`