#Wprowadzenie
DOM (Document Object Model) to interfejs programistyczny dla dokumentów HTML i XML. Umożliwia dynamiczne manipulowanie strukturą, stylem i treścią dokumentów. DOM reprezentuje dokument jako drzewo obiektów, gdzie każdy element, atrybut i tekst w dokumencie jest węzłem drzewa.
#Struktura DOM
DOM przedstawia dokument HTML jako drzewo hierarchiczne:
<!DOCTYPE html>
<html>
<head>
<title>Przykład DOM</title>
</head>
<body>
<h1>Witaj, świecie!</h1>
<p>To jest akapit.</p>
</body>
</html>
Powyższy dokument HTML jest reprezentowany w DOM jako:
#document
|
+-- html
|
+-- head
| |
| +-- title
| |
| +-- "Przykład DOM"
|
+-- body
|
+-- h1
| |
| +-- "Witaj, świecie!"
|
+-- p
|
+-- "To jest akapit."
#Podstawowe operacje na DOM
DOM udostępnia wiele metod do manipulacji dokumentem. Oto kilka przykładów:
#Wybieranie elementów
#getElementById
Wybiera element na podstawie jego identyfikatora (ID):
<p id="myParagraph">To jest akapit.</p>
<script>
const para = document.getElementById("myParagraph");
console.log(para.textContent); // "To jest akapit."
</script>
#getElementsByClassName
Wybiera wszystkie elementy z określoną klasą:
<p class="myClass">Akapit 1</p>
<p class="myClass">Akapit 2</p>
<script>
const paras = document.getElementsByClassName("myClass");
console.log(paras.length); // 2
</script>
#querySelector i querySelectorAll
Wybiera elementy za pomocą selektorów CSS:
<p class="myClass">Akapit 1</p>
<p class="myClass">Akapit 2</p>
<script>
const firstPara = document.querySelector(".myClass");
console.log(firstPara.textContent); // "Akapit 1"
const allParas = document.querySelectorAll(".myClass");
console.log(allParas.length); // 2
</script>
#Manipulacja elementami
#Zmiana tekstu
<p id="myParagraph">To jest akapit.</p>
<script>
const para = document.getElementById("myParagraph");
para.textContent = "Zmieniony tekst akapitu.";
</script>
#Zmiana atrybutów
<img id="myImage" src="image.jpg" alt="Obrazek" />
<script>
const img = document.getElementById("myImage");
img.src = "newImage.jpg";
img.alt = "Nowy obrazek";
</script>
#Dodawanie elementów
<ul id="myList">
<li>Element 1</li>
</ul>
<script>
const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Element 2";
list.appendChild(newItem);
</script>
#Usuwanie elementów
<p id="myParagraph">To jest akapit.</p>
<script>
const para = document.getElementById("myParagraph");
para.remove();
</script>
#Zadania do wykonania
#Zadanie 1
Napisz kod HTML z listą (ul) i trzema elementami (li). Następnie za pomocą JavaScript dodaj czwarty element do listy.
Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lista</title>
</head>
<body>
<ul id="myList">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<script>
const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Element 4";
list.appendChild(newItem);
</script>
</body>
</html>
#Zadanie 2
Utwórz formularz z polem tekstowym i przyciskiem. Po kliknięciu przycisku zmień tekst przycisku na "Wysłano".
Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formularz</title>
</head>
<body>
<form id="myForm">
<input type="text" id="myInput" />
<button type="button" id="myButton">Wyślij</button>
</form>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
button.textContent = "Wysłano";
});
</script>
</body>
</html>
#Zadanie 3
Napisz kod HTML z obrazkiem. Za pomocą JavaScript zmień źródło obrazka na nowe po kliknięciu na niego.
Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Obrazek</title>
</head>
<body>
<img id="myImage" src="image.jpg" alt="Obrazek" />
<script>
const img = document.getElementById("myImage");
img.addEventListener("click", () => {
img.src = "newImage.jpg";
});
</script>
</body>
</html>
#Zadanie 4
Utwórz stronę HTML z trzema akapitami. Użyj JavaScript, aby zmienić kolor tekstu wszystkich akapitów na niebieski.
Pokaż rozwiązanie
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kolor tekstu</title>
</head>
<body>
<p>Akapit 1</p>
<p>Akapit 2</p>
<p>Akapit 3</p>
<script>
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach((p) => {
p.style.color = "blue";
});
</script>
</body>
</html>
To tyle na temat podstaw DOM! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu.