Praca z DOM (Document Object Model) to podstawa w JavaScript. Dzięki metodom takim jak createElement, appendChild czy replaceChild możemy dynamicznie zmieniać zawartość strony. Dodatkowo, poprzez obiekt style, sterujemy wyglądem elementów HTML bezpośrednio z poziomu skryptu.

W tym wpisie znajdziesz proste wyjaśnienia oraz przykłady gotowe do uruchomienia.

Operacje na elementach dokumentu
1. document.createElement(element)

Tworzy nowy element HTML w pamięci. Nie jest on jeszcze widoczny na stronie, dopóki nie zostanie dołączony do dokumentu.

Przykład 1 – tworzenie nagłówka

<div id="container"></div>
<script>
let naglowek = document.createElement("h1");
naglowek.textContent = "Witaj w JS!";
document.getElementById("container").appendChild(naglowek);
</script>

Przykład 2 – tworzenie przycisku

<div id="buttons"></div>
<script>
let btn = document.createElement("button");
btn.textContent = "Kliknij mnie!";
document.getElementById("buttons").appendChild(btn);
</script>

2. document.removeChild(element)

Usuwa wskazany element z rodzica.

Przykład 1 – usuń akapit

<div id="box">
<p id="tekst">Ten akapit zostanie usunięty</p>
</div>
<script>
let box = document.getElementById("box");
let tekst = document.getElementById("tekst");
box.removeChild(tekst);
</script>

Przykład 2 – usuń pierwszy element listy

<ul id="lista">
<li>Pierwszy</li>
<li>Drugi</li>
</ul>
<script>
let lista = document.getElementById("lista");
lista.removeChild(lista.firstElementChild);
</script>

3. document.appendChild(element)

Dodaje nowy element jako dziecko do wskazanego rodzica.

Przykład 1 – nowy element listy

<ul id="lista"></ul>
<script>
let li = document.createElement("li");
li.textContent = "Nowy element";
document.getElementById("lista").appendChild(li);
</script>

Przykład 2 – dodaj obrazek

<div id="galeria"></div>
<script>
let img = document.createElement("img");
img.src = "https://via.placeholder.com/100";
document.getElementById("galeria").appendChild(img);
</script>

4. document.replaceChild(element, oldElement)

Zamienia istniejący element na inny.

Przykład 1 – zamień akapit

<div id="content">
<p id="stary">Stary tekst</p>
</div>
<script>
let nowy = document.createElement("p");
nowy.textContent = "Nowy tekst";
let content = document.getElementById("content");
let stary = document.getElementById("stary");
content.replaceChild(nowy, stary);
</script>

Przykład 2 – zamień przycisk

<div id="panel">
<button id="btn1">Stary przycisk</button>
</div>
<script>
let nowyBtn = document.createElement("button");
nowyBtn.textContent = "Nowy przycisk";
let panel = document.getElementById("panel");
let staryBtn = document.getElementById("btn1");
panel.replaceChild(nowyBtn, staryBtn);
</script>

5. document.write(text)

Wstawia tekst lub HTML bezpośrednio do dokumentu.
Uwaga: użycie po załadowaniu strony nadpisze całą zawartość.

Przykład 1 – prosty napis

<script>
document.write("Witaj świecie!");
</script>

Przykład 2 – rysowanie listy

<script>
document.write("<ul><li>Jeden</li><li>Dwa</li></ul>");
</script>

• Jeśli document.write() zostanie wywołane w trakcie parsowania strony (np. wewnątrz <script> umieszczonego w kodzie HTML zanim DOM jest gotowy) – wtedy treść jest wstrzykiwana w tym miejscu i niczego nie nadpisuje.
  (tak działają przykłady wyżej –  skrypt jest czytany w momencie ładowania i wpis „Witaj świecie!” ląduje w tym miejscu w drzewie DOM).

• Jeśli document.write() zostanie wywołane już po załadowaniu dokumentu (np. w onload, w setTimeout, czy ręcznie w konsoli po tym, jak strona się wyrenderowała), to wtedy zgodnie z dokumentacją:

  „The write() method deletes all existing HTML when used on a loaded document.”
  Innymi słowy – kasuje cały dokument i zaczyna pisać od zera.

  na przykład:

  <p>To jest treść strony</p>

  <script>
// Zadziała w trakcie ładowania - tekst wstrzyknięty bez kasowania
document.write("Witaj świecie!<br>");
</script>

  <script>
// Zadziała dopiero po załadowaniu dokumentu - nadpisze całość
window.onload = function() {
document.write("Nadpisana strona!");
}
</script>

Wybrane właściwości obiektu style

Każdy element HTML ma obiekt style, który pozwala zmieniać wygląd bezpośrednio z poziomu JavaScript.

1. backgroundColor

Ustawia kolor tła elementu.

<div id="box" style="width:100px; height:100px;"></div>
<script>
document.getElementById("box").style.backgroundColor = "red";
</script>

2. color

Kolor tekstu.

<p id="txt">Kolorowy tekst</p>
<script>
document.getElementById("txt").style.color = "green";
</script>

3. fontSize

Rozmiar czcionki.

<p id="tekst">Mały tekst</p>
<script>
document.getElementById("tekst").style.fontSize = "30px";
</script>

4. fontStyle

Styl czcionki (normal, italic, oblique).

<p id="styl">Normalny tekst</p>
<script>
document.getElementById("styl").style.fontStyle = "italic";
</script>

5. fontWeight

Grubość czcionki (normal, bold, lighter, bolder).

<p id="waga">Przykład</p>
<script>
document.getElementById("waga").style.fontWeight = "bold";
</script>

6. listStyleType

Rodzaj wypunktowania (circle, square, decimal, none).

<ul id="mojaLista">
<li>Element 1</li>
<li>Element 2</li>
</ul>
<script>
document.getElementById("mojaLista").style.listStyleType = "square";
</script>

Podsumowanie

Dzięki operacjom na DOM i właściwościom style możemy:

1. tworzyć, usuwać i modyfikować elementy HTML,
2. dynamicznie sterować wyglądem strony,
3. budować interaktywne aplikacje webowe bez przeładowania strony.