Javascript Cz.7 - Podstawy Pracy Z DOM W JavaScript - WIKI

Model DOM (Document Object Model) to sposób, w jaki JavaScript „widzi” stronę internetową. Dzięki niemu możemy wyszukiwać elementy, zmieniać ich zawartość, a także dodawać i usuwać nowe elementy.

Zobaczmy najważniejsze metody i operacje, które powinien znać każdy początkujący programista.

1. Wyszukiwanie elementów

Aby coś zmienić na stronie, najpierw musimy to znaleźć.

<p id="tekst">To jest przykładowy tekst</p>

Wyszukiwanie po id

let element = document.getElementById("tekst"); console.log(element.innerHTML); // wyświetli: To jest przykładowy tekst

Wyszukiwanie po nazwie taga

let paragrafy = document.getElementsByTagName("p");
console.log(paragrafy[0].innerHTML); // pierwszy <p> na stronie

Wyszukiwanie po klasie

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

i kod JavaScript

let opisy = document.getElementsByClassName("opis");
console.log(opisy[1].innerHTML); // wyświetli: Drugi opis

Wyjaśnijmy tutaj jeszcze, dlaczego console.log dla opisy[1] wyświetli 2 element. Otóż wszystkie klasy „opis” w zapisie tablocowym [nawias kwadratowy] w którym umieszczony jest indeks jeden, to tak na prawdę element nr 2, gdyż w tablicach, indeksy liczymy od ZERA.

2. Zmiana elementów w DOM

Kiedy znajdziemy element na stronie (np. akapit, link, obrazek), możemy go zmodyfikować – czyli zmienić jego treść, atrybuty (np. link, źródło obrazka), albo styl (np. kolor, rozmiar czcionki).

Pomyśl o tym tak:
– DOM to drzewo.
– Każdy element HTML (np. <p>, <a>, <img>) to gałąź tego drzewa.
– JavaScript pozwala nam „podmienić liście” – czyli zawartość, wygląd i ustawienia tych elementów.

2.1 Zmiana treści elementu (`innerHTML`)

innerHTML to wszystko, co znajduje się wewnątrz znacznika HTML.

<p id="tekst">To jest stara treść</p>

oraz kod JavaScript, podmieniający tę treść

let element = document.getElementById("tekst");
element.innerHTML = "To jest nowa treść!";

2.2 Zmiana atrybutów elementu (`setAttribute` i `attribute = "wartość"`)

Elementy HTML mają atrybuty, np.:

<a href="..."> – link prowadzi gdzieś indziej,

<img src="..."> – obrazek ma podane źródło,

<input type="text"> – pole formularza ma typ „tekst”.

Możemy je zmieniać w JavaScripcie.

Przykład 1 – link

<a id="link" href="https://google.com">Kliknij mnie</a>

i kod JavaScript, który podmieni link

let link = document.getElementById("link");
link.setAttribute("href", "https://piotrgabriel.pl/wiki");

Teraz kliknięcie linku przeniesie nie na Google, ale na ten blog.

Przykład 2 – obrazek

<img id="obrazek" src="kot.jpg" alt="Kot">

oraz kod JS

let img = document.getElementById("obrazek");
img.setAttribute("src", "pies.jpg");

Zamiast kota wyświetli się pies.

2.3 Zmiana stylów CSS (`style.property`)

Możemy też zmieniać wygląd elementów – tak, jakbyśmy edytowali CSS, tylko dynamicznie.

<p id="tekst">Zmieniam kolor!</p>

no i JS

let element = document.getElementById("tekst");
element.style.color = "red"; // zmiana koloru
element.style.fontSize = "24px"; // zmiana rozmiaru czcionki
element.style.fontWeight = "bold"; // pogrubienie

Efekt: tekst stanie się duży, czerwony i pogrubiony.

2.4 Podsumowanie zmian

W skrócie:

innerHTML – zmienia zawartość elementu (tekst/HTML w środku).
setAttribute albo element.atrybut = ... – zmienia ustawienia elementu (np. link, src obrazka).
style.property – zmienia wygląd elementu (kolor, wielkość, marginesy itd.).

2.5 Dodatkowe elementy

`document.getElementById("lista")`

Co robi: Zwraca jeden element o podanym id (albo null, jeśli nie istnieje).
Zwraca: Referencję do elementu (np. HTMLUListElement) lub null.

const lista = document.getElementById("lista");
if (lista) {
// możemy na niej działać
}

Pułapka: id musi być unikalne na stronie. Gdy element nie istnieje, dostaniesz null — sprawdzaj to przed użyciem.

`document.createElement("li")`

Co robi: Tworzy nowy element w pamięci (jeszcze nie na stronie).
Zwraca: Pusty element, który dopiero dodasz do DOM.

const li = document.createElement("li");
li.textContent = "Mleko"; // uzupełnij treść
// na razie nie widać na stronie, dopóki nie wstawisz do DOM

Pułapka: Samo createElement niczego nie pokaże – musisz jeszcze użyć np. appendChild.

`parent.appendChild(node)`

Co robi: Wstawia node jako ostatnie dziecko elementu-rodzica.
Dodatkowo: Jeśli node już gdzieś jest w DOM – zostanie przeniesiony, nie skopiowany.

const lista = document.getElementById("lista");
const li = document.createElement("li");
li.textContent = "Chleb";
lista.appendChild(li); // teraz element jest widoczny na stronie

Pułapki:

Jeden węzeł może mieć tylko jednego rodzica — appendChild go przenosi.
Chcesz kopię? Użyj node.cloneNode(true) i dopiero potem appendChild.

`parent.removeChild(node)`

Co robi: Usuwa konkretne dziecko z rodzica.
Zwraca: Usunięty węzeł (gdybyś chciał go np. wstawić gdzie indziej).

const lista = document.getElementById("lista");
const ostatni = lista?.lastElementChild; // lepiej niż lastChild (patrz niżej)
if (ostatni) lista.removeChild(ostatni);

Pułapki:

removeChild wymaga referencji do dziecka.
Używaj lastElementChild zamiast lastChild, bo lastChild może być węzłem tekstowym (np. spacja/enter).
Alternatywa (krócej): ostatni.remove() — usuwa się sam bez odwołania do rodzica.

`parent.getElementsByTagName("li")`

Co robi: Zwraca „żywą” kolekcję (HTMLCollection) wszystkich elementów o danym tagu wewnątrz parent.
„Żywa” = automatycznie się aktualizuje, gdy dodajesz/usuwasz elementy.

const lista = document.getElementById("lista");
const items = lista.getElementsByTagName("li"); // HTMLCollection (live)

// stylowanie wszystkich pozycji:
for (const el of items) {
el.style.color = "blue";
el.style.fontWeight = "bold";
}

Pułapki:

To nie jest tablica. Jeśli chcesz metody tablicowe, zrób:
Array.from(items).forEach(...).
Przy usuwaniu w pętli lepiej iterować „od końca” albo najpierw skopiować do tablicy, bo „żywa” kolekcja zmienia się w trakcie iteracji.

const arr = Array.from(items);
for (let i = arr.length - 1; i >= 0; i--) {
arr[i].remove();
}

Gdy potrzebujesz selektorów CSS i statycznej listy, wygodniejsze bywa querySelectorAll("li") (zwraca NodeList, nie „żywe”).

Ćwiczenie 1: Zmieniamy elementy na stronie za pomocą JavaScript

Teraz warto to przećwiczyć. Zadaniem jest stworzenie prostej strony HTML, na której będziesz zmieniać treść, wygląd i atrybuty elementów.

Zadanie 1. Stwórz stronę HTML z poniższymi elementami:

akapit <p> z tekstem np. „To jest stary tekst”,
przycisk <button> z napisem „Zmień tekst”,
przycisk <button> z napisem „Zmień kolor”,
obrazek <img> (może być np. kot.jpg).

Zadanie 2. Napisz skrypt JavaScript, który:

po kliknięciu przycisku „Zmień tekst” zmieni treść akapitu na „To jest nowy tekst!”
po kliknięciu przycisku „Zmień kolor” zmieni kolor akapitu na niebieski,
dodatkowo podmieni obrazek z kot.jpg na pies.jpg.

Rozwiązanie

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Ćwiczenie DOM</title>
</head>
<body>

<p id="tekst">To jest stary tekst</p>


<button onclick="zmienTekst()">Zmień tekst</button>
<button onclick="zmienKolor()">Zmień kolor</button>


<img id="obrazek" src="kot.jpg" alt="Kot" width="200">

<script>
// Funkcja zmieniająca treść akapitu
function zmienTekst() {
let element = document.getElementById("tekst");
element.innerHTML = "To jest nowy tekst!";
}

// Funkcja zmieniająca kolor akapitu
function zmienKolor() {
let element = document.getElementById("tekst");
element.style.color = "blue";
}

// Podmiana obrazka
let obrazek = document.getElementById("obrazek");
obrazek.setAttribute("src", "pies.jpg");
</script>
</body>
</html>

Krótki komentarz, przeanalizujmy co się tutaj dzieje?

document.getElementById("tekst") – > wyszukuje akapit po id.
innerHTML = "..." – > zmienia jego treść.
style.color = "blue" – > zmienia kolor tekstu na niebieski.
setAttribute("src", "pies.jpg") – > podmienia źródło obrazka.

Ćwiczenie 2: Operacje na elementach dokumentu

W tym ćwiczeniu nauczysz się dodawać, usuwać i podmieniać elementy na stronie przy użyciu JavaScript.

Zadanie 1. Utwórz prostą stronę HTML z nagłówkiem <h2>, pustym kontenerem <div id="kontener"></div> i trzema przyciskami:

„Dodaj akapit”
„Usuń akapit”
„Podmień akapit”

Zadanie 2. Napisz skrypt, który:

po kliknięciu „Dodaj akapit” utworzy nowy element <p> z tekstem „Jestem nowym akapitem” i doda go do kontenera,
po kliknięciu „Usuń akapit” usunie ostatni dodany akapit,
po kliknięciu „Podmień akapit” zamieni istniejący akapit na inny z treścią „Zostałem podmieniony”.

Rozwiązanie

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Ćwiczenie DOM 2</title>
</head>
<body>
<h2>Ćwiczenie 2: Operacje na elementach</h2>


<div id="kontener"></div>


<button onclick="dodajAkapit()">Dodaj akapit</button>
<button onclick="usunAkapit()">Usuń akapit</button>
<button onclick="podmienAkapit()">Podmień akapit</button>

<script>
let kontener = document.getElementById("kontener");

// Dodawanie nowego akapitu
function dodajAkapit() {
let nowy = document.createElement("p");
nowy.innerHTML = "Jestem nowym akapitem";
kontener.appendChild(nowy);
}

// Usuwanie ostatniego akapitu
function usunAkapit() {
if (kontener.lastChild) {
kontener.removeChild(kontener.lastChild);
}
}

// Podmiana pierwszego akapitu
function podmienAkapit() {
if (kontener.firstChild) {
let nowy = document.createElement("p");
nowy.innerHTML = "Zostałem podmieniony";
kontener.replaceChild(nowy, kontener.firstChild);
}
}
</script>
</body>
</html>

Wyjaśnienie

createElement("p") -> tworzy nowy element akapitu.
appendChild(nowy) -> dodaje nowy akapit do kontenera.
removeChild(...) -> usuwa wskazany element z drzewa DOM.
replaceChild(nowy, stary) -> podmienia stary element na nowy.

Ćwiczenie 3: Interaktywna lista zakupów

W tym ćwiczeniu stworzymy prostą listę zakupów, do której można dodawać nowe produkty, usuwać je i zmieniać ich wygląd.

Zadanie 1. Utwórz stronę HTML z:

nagłówkiem <h2>Moja lista zakupów</h2>,
pustą listą <ul id="lista"></ul>,
polem tekstowym <input> do wpisania produktu,
trzema przyciskami: „Dodaj produkt”, „Usuń ostatni”, „Pokoloruj listę”.

Zadanie 2. Napisz skrypt, który:

doda nowy produkt wpisany w polu tekstowym do listy,
usunie ostatni element listy,
zmieni kolor wszystkich elementów listy na niebieski.

Rozwiązanie

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Ćwiczenie DOM 3</title>
</head>
<body>
<h2>Moja lista zakupów</h2>


<input type="text" id="produkt" placeholder="Wpisz produkt">
<br><br>


<ul id="lista"></ul>


<button onclick="dodajProdukt()">Dodaj produkt</button>
<button onclick="usunProdukt()">Usuń ostatni</button>
<button onclick="pokolorujListe()">Pokoloruj listę</button>

<script>
let lista = document.getElementById("lista");

// Dodawanie nowego produktu do listy
function dodajProdukt() {
let input = document.getElementById("produkt");
if (input.value.trim() !== "") {
let nowy = document.createElement("li");
nowy.innerHTML = input.value;
lista.appendChild(nowy);
input.value = ""; // czyścimy pole po dodaniu
}
}

// Usuwanie ostatniego produktu
function usunProdukt() {
if (lista.lastChild) {
lista.removeChild(lista.lastChild);
}
}

// Zmiana koloru całej listy
function pokolorujListe() {
let produkty = lista.getElementsByTagName("li");
for (let i = 0; i < produkty.length; i++) {
produkty[i].style.color = "blue";
produkty[i].style.fontWeight = "bold";
}
}
</script>
</body>
</html>

Wyjaśnienie

getElementById("lista") -> pobiera listę zakupów.
createElement("li") -> tworzy nowy punkt listy.
appendChild(...) -> dodaje produkt na końcu listy.
removeChild(...) -> usuwa ostatni element listy.
getElementsByTagName("li") -> pobiera wszystkie produkty w liście i pozwala zmieniać ich styl w pętli.

Cheat sheet Nikon D5300

Vibe Coding: Jak sztuczna inteligencja redefiniuje kodowanie – moja praktyczna perspektywa

PHP – Tablice – przydatne i podstawowe elementy

Javascript cz.8 – Operacje na elementach dokumentu i właściwości obiektu style

Vibe coding z Gemini CLI – kompletny poradnik (Windows)

Konfiguracja VLAN w przełączniku (switch) TP-Link TL-SG3210

Jak stworzyć idealny plik gemini.md? Kompletny przewodnik dla Gemini CLI

Javascript cz.7 – Podstawy pracy z DOM w JavaScript

Javascript cz.6 – innerText, textContent oraz value

Adresacja IP, klasy adresów, maski sieciowe, warstwy sieci oraz konfiguracja routera TP-Link jako bridge, access point i klient AP

Wgrywanie plików na serwer w PHP – system uploadu plików

Sesje w PHP – Jak zabezpieczyć stronę WWW przed nieautoryzowanym dostępem

WIKI – Technik Informatyk

przydatne informacje dla uczniów technikum informatycznego

Javascript cz.7 – Podstawy pracy z DOM w JavaScript

1. Wyszukiwanie elementów

2. Zmiana elementów w DOM

2.1 Zmiana treści elementu (`innerHTML`)

2.2 Zmiana atrybutów elementu (`setAttribute` i `attribute = "wartość"`)

Przykład 1 – link

Przykład 2 – obrazek

2.3 Zmiana stylów CSS (`style.property`)

2.4 Podsumowanie zmian

2.5 Dodatkowe elementy

`document.getElementById("lista")`

`document.createElement("li")`

`parent.appendChild(node)`

`parent.removeChild(node)`

`parent.getElementsByTagName("li")`

Ćwiczenie 1: Zmieniamy elementy na stronie za pomocą JavaScript

Ćwiczenie 2: Operacje na elementach dokumentu

Ćwiczenie 3: Interaktywna lista zakupów

1. Wyszukiwanie elementów

2. Zmiana elementów w DOM

2.1 Zmiana treści elementu (innerHTML)

2.2 Zmiana atrybutów elementu (setAttribute i attribute = "wartość")

Przykład 1 – link

Przykład 2 – obrazek

2.3 Zmiana stylów CSS (style.property)

2.4 Podsumowanie zmian

2.5 Dodatkowe elementy

document.getElementById("lista")

document.createElement("li")

parent.appendChild(node)

parent.removeChild(node)

parent.getElementsByTagName("li")

Ćwiczenie 1: Zmieniamy elementy na stronie za pomocą JavaScript

Ćwiczenie 2: Operacje na elementach dokumentu

Ćwiczenie 3: Interaktywna lista zakupów

2.1 Zmiana treści elementu (`innerHTML`)

2.2 Zmiana atrybutów elementu (`setAttribute` i `attribute = "wartość"`)

2.3 Zmiana stylów CSS (`style.property`)

`document.getElementById("lista")`

`document.createElement("li")`

`parent.appendChild(node)`

`parent.removeChild(node)`

`parent.getElementsByTagName("li")`