Jak manipulować DOM w JavaScript
JavaScript sam w sobie jest tylko silnikiem logicznym. Aby "ożywić" stronę internetową, musi on komunikować się z HTML-em. Do tego służy DOM (Document Object Model).
1. Co to jest DOM?
DOM to reprezentacja Twojej strony HTML w formie drzewa obiektów, które JavaScript może czytać i zmieniać. Przeglądarka tworzy globalny obiekt document, który jest naszym punktem wejścia.
2. Pobieranie elementów
Aby zmienić element, najpierw musimy go "złapać". Najpopularniejszą metodą jest dzisiaj querySelector.
// Pobiera element po ID
const naglowek = document.getElementById('glowny-tytul');
// Pobiera pierwszy znaleziony element pasujący do selektora CSS
const przycisk = document.querySelector('.btn-primary');
// Pobiera WSZYSTKIE elementy pasujące (zwraca listę)
const wszystkieListy = document.querySelectorAll('li');
3. Zmiana treści i stylu
Gdy mamy element w zmiennej, możemy go modyfikować:
const box = document.querySelector('.box');
// Zmiana tekstu
box.innerText = "Nowy tekst!";
// Zmiana HTML w środku
box.innerHTML = "<strong>Pogrubiony tekst</strong>";
// Zmiana stylów (CSS)
box.style.backgroundColor = "red";
box.style.padding = "20px";
4. Reagowanie na kliknięcia (Event Listeners)
Strony są interaktywne dzięki "nasłuchiwaniu zdarzeń". Używamy do tego metody addEventListener.
const guzik = document.querySelector('#mojGuzik');
function pokazAlert() {
alert("Kliknięto mnie!");
}
// Dodajemy nasłuchiwacz na 'click'
guzik.addEventListener('click', pokazAlert);
5. Dodawanie nowych elementów
Możemy tworzyć HTML "w locie", bez wpisywania go w plik .html:
// 1. Stwórz element
const nowyParagraf = document.createElement('p');
// 2. Dodaj treść
nowyParagraf.innerText = "To jest paragraf dodany przez JS.";
// 3. "Przyklej" go do istniejącego elementu na stronie
document.body.appendChild(nowyParagraf);