InnoMarts logo
InnoMarts
Fast websites
← Back to course

DOM

DOM

Witaj z powrotem.

W poprzedniej lekcji poznałeś obiekty.

Obiekty pomagają JavaScript przechowywać uporządkowane dane.

Bardzo przydatne.

Bardzo poważne.

Bardzo zaprzyjaźnione z nawiasami klamrowymi.

Dziś zbliżamy się jeszcze bardziej do prawdziwego web developmentu.

Poznajemy DOM.

DOM oznacza Document Object Model.

Brzmi bardzo oficjalnie.

Prawie jak coś napisane przez komisję w pokoju z kiepską kawą.

Ale sama idea jest prosta.

DOM to sposób, w jaki JavaScript widzi twoją stronę HTML.

Dzięki DOM JavaScript może:

Bez DOM JavaScript żyje głównie w konsoli.

Z DOM JavaScript może dotykać strony.

Ostrożnie.

Zazwyczaj.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Na końcu tej lekcji będziesz rozumieć, jak JavaScript komunikuje się ze stroną internetową.

To duży krok.

Wcześniej JavaScript głównie rozmawiał sam ze sobą w konsoli.

Teraz zaczyna rozmawiać ze stroną.

Jak developer, który w końcu wychodzi z terminala i widzi światło słoneczne.

Na chwilę.

Potem wraca do terminala.

Czym Jest DOM?

DOM to reprezentacja twojej strony HTML.

Kiedy przeglądarka ładuje HTML, tworzy strukturę, której JavaScript może używać.

Przykład HTML:

<h1>Cześć</h1>
<p>Witaj w JavaScript.</p>

Przeglądarka zamienia to w coś, co JavaScript może odczytywać i zmieniać.

JavaScript może potem zrobić coś takiego:

document.querySelector("h1").textContent = "Cześć z JavaScript!";

Strona się zmienia.

Magia?

Nie.

DOM.

Lepsze niż magia.

Bo można to debugować.

Przeważnie.

HTML Staje Się Obiektami

DOM oznacza Document Object Model.

Najważniejsze słowo tutaj to object.

Przeglądarka traktuje elementy HTML jak obiekty.

Na przykład ten element HTML:

<h1 id="title">JavaScript</h1>

można odczytać w JavaScript:

const titleElement = document.getElementById("title");

Teraz titleElement jest obiektem JavaScript, który reprezentuje ten element HTML.

Możesz go odczytać.

Zmienić.

Ostylować.

Przesunąć.

Sprawić, że będzie cierpiał.

Ale proszę, nie rób tego.

Używaj swojej mocy odpowiedzialnie.

Utwórz Projekt

Utwórz folder dla tej lekcji:

mkdir javascript-lesson7
cd javascript-lesson7
touch index.html
touch script.js

Twój projekt powinien wyglądać tak:

javascript-lesson7/
  index.html
  script.js

Otwórz folder w edytorze.

Dziś będziemy pracować bezpośrednio ze stroną internetową.

Konsola nadal jest przydatna.

Ale teraz strona też będzie się zmieniać.

Wreszcie widoczne rezultaty.

Przeglądarka przygotowuje się emocjonalnie.

Napisz HTML

Otwórz index.html i dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
</head>
<body>
  <h1 id="mainTitle">DOM</h1>
  <p id="description">JavaScript może zmienić ten tekst.</p>

  <script src="script.js"></script>
</body>
</html>

Otwórz plik w przeglądarce.

Potem otwórz script.js.

Jesteśmy gotowi kontrolować stronę.

Nie cały internet.

Tylko tę stronę.

Zostańmy skromni.

Wybieranie Elementu za Pomocą getElementById

Metoda getElementById znajduje element po jego id.

Przykład:

const titleElement = document.getElementById("mainTitle");

console.log(titleElement);

Odśwież przeglądarkę i otwórz konsolę.

Powinieneś zobaczyć element <h1>.

Ta linia:

document.getElementById("mainTitle")

oznacza:

“Znajdź element z id mainTitle.”

id w HTML wygląda tak:

<h1 id="mainTitle">DOM</h1>

JavaScript go znajduje.

Zapisuje w zmiennej.

Teraz możemy z nim pracować.

Jak mali mechanicy internetu.

Z mniejszą liczbą narzędzi.

I większą liczbą średników.

Zmienianie Tekstu za Pomocą textContent

Teraz zmieńmy tekst.

Dodaj to do script.js:

const titleElement = document.getElementById("mainTitle");

titleElement.textContent = "JavaScript Zmienił Ten Tytuł";

Odśwież przeglądarkę.

Tytuł powinien się zmienić.

Oryginalny HTML:

<h1 id="mainTitle">DOM</h1>

Ale JavaScript zmienia go na:

JavaScript Zmienił Ten Tytuł

To ważne.

Plik HTML nadal zawiera stary tekst.

Ale strona w przeglądarce pokazuje nowy tekst, bo JavaScript zmienił DOM.

JavaScript nie przepisał twojego pliku.

Zmienił stronę w przeglądarce.

Jak założenie kapelusza na pomnik.

Pomnik jest ten sam.

Ale wygląda inaczej.

Wybieranie za Pomocą querySelector

Istnieje jeszcze jeden bardzo popularny sposób wybierania elementów:

document.querySelector()

Przykład:

const descriptionElement = document.querySelector("#description");

descriptionElement.textContent = "DOM jest teraz pod kontrolą JavaScript.";

#description oznacza:

“Znajdź element z id description.”

Tak jak w CSS.

Bo querySelector używa selektorów CSS.

Przykłady:

document.querySelector("h1");
document.querySelector("#mainTitle");
document.querySelector(".card");

To sprawia, że querySelector jest bardzo elastyczny.

Jeśli znasz selektory CSS, to już wiesz, jak znajdować elementy.

Gratulacje.

Twoja wiedza CSS weszła na siłownię JavaScript.

getElementById czy querySelector?

Obie metody mogą wybierać elementy.

Przykład z getElementById:

const title = document.getElementById("mainTitle");

Przykład z querySelector:

const title = document.querySelector("#mainTitle");

Oba działają.

Prosta zasada:

Używaj getElementById, gdy wybierasz element po id.

Używaj querySelector, gdy chcesz więcej elastyczności.

Dla początkujących oba sposoby są w porządku.

Nie zaczynajmy wojny religijnej o to.

Programowanie ma już wystarczająco dużo dramatu.

Zmienianie Stylów za Pomocą JavaScript

Możesz też zmieniać style.

Przykład:

const titleElement = document.getElementById("mainTitle");

titleElement.style.color = "blue";
titleElement.style.fontSize = "48px";

Odśwież przeglądarkę.

Tytuł stanie się niebieski i większy.

JavaScript może bezpośrednio zmieniać style CSS.

Ale uważaj.

Jeśli włożysz za dużo stylów do JavaScript, kod może stać się bałaganem.

Zwykle CSS powinien zajmować się stylami.

JavaScript powinien dodawać lub usuwać klasy.

To jest czystsze.

Jak używanie właściwych narzędzi zamiast naprawiania wszystkiego taśmą klejącą.

Chociaż taśma czasem ma moc.

Zmienianie Klas

Użyjmy klas zamiast bezpośrednich stylów.

Zaktualizuj index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>

  <style>
    .highlight {
      color: white;
      background-color: #2563eb;
      padding: 12px 18px;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <h1 id="mainTitle">DOM</h1>
  <p id="description">JavaScript może zmienić ten tekst.</p>

  <script src="script.js"></script>
</body>
</html>

Teraz zaktualizuj script.js:

const titleElement = document.getElementById("mainTitle");

titleElement.classList.add("highlight");

Odśwież przeglądarkę.

Klasa zostaje dodana.

Styl się pojawia.

To bardzo częsty schemat:

element.classList.add("class-name");

Możesz też usunąć klasę:

element.classList.remove("highlight");

Albo przełączać klasę:

element.classList.toggle("highlight");

toggle oznacza:

Bardzo przydatne.

Bardzo eleganckie.

Prawie podejrzane.

Tworzenie Elementów

JavaScript może tworzyć nowe elementy HTML.

Przykład:

const newParagraph = document.createElement("p");

newParagraph.textContent = "Ten akapit został utworzony przez JavaScript.";

console.log(newParagraph);

To tworzy akapit.

Ale jeszcze nie pojawia się on na stronie.

Dlaczego?

Bo stworzenie elementu to nie to samo co dodanie go do strony.

Stworzyłeś go.

Teraz musisz go podłączyć.

Jak zbudowanie półki i przypomnienie sobie, że nadal leży na podłodze.

Dodawanie Elementów do Strony

Aby dodać element do strony, użyj appendChild.

Przykład:

const newParagraph = document.createElement("p");
newParagraph.textContent = "Ten akapit został utworzony przez JavaScript.";

document.body.appendChild(newParagraph);

Odśwież przeglądarkę.

Teraz akapit się pojawia.

Ta linia:

document.body.appendChild(newParagraph);

oznacza:

“Dodaj ten nowy akapit do body.”

Bardzo przydatne.

Tak JavaScript może tworzyć dynamiczną treść.

Zadania.

Wiadomości.

Karty.

Produkty.

Losowe ostrzeżenia.

Zwykłe życie web developera.

Usuwanie Elementów

Możesz też usuwać elementy.

Przykład:

const descriptionElement = document.getElementById("description");

descriptionElement.remove();

Odśwież przeglądarkę.

Akapit znika.

JavaScript usunął go z DOM.

Ponownie: oryginalny plik HTML nie został zmieniony.

Zmienia się tylko strona w przeglądarce.

DOM jest tymczasowy.

Jak motywacja po przeczytaniu długiego komunikatu błędu.

Ale idziemy dalej.

innerHTML

Istnieje też właściwość innerHTML.

Pozwala wstawić HTML jako tekst.

Przykład:

const descriptionElement = document.getElementById("description");

descriptionElement.innerHTML = "<strong>Ten tekst jest teraz pogrubiony.</strong>";

To działa.

Ale uważaj.

Jeśli włożysz dane od użytkownika do innerHTML, może być niebezpiecznie.

Dlaczego?

Bo HTML może zawierać skrypty.

A skrypty mogą tworzyć problemy bezpieczeństwa.

Na razie prosta zasada:

Używaj textContent do tekstu.

Używaj innerHTML tylko wtedy, gdy naprawdę potrzebujesz HTML.

Nie wkładaj losowych danych użytkownika do innerHTML.

Błędy bezpieczeństwa nie są urocze.

Nie przynoszą kawy.

Zbuduj Panel Wiadomości

Teraz zbudujemy mały panel wiadomości.

Zaktualizuj index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
      margin-right: 8px;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .message {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .success {
      background-color: #ecfdf5;
      border-color: #bbf7d0;
      color: #166534;
    }

    .warning {
      background-color: #fffbeb;
      border-color: #fde68a;
      color: #92400e;
    }
  </style>
</head>
<body>
  <h1>DOM</h1>

  <div class="card">
    <p id="message" class="message">Kliknij przycisk, aby zmienić tę wiadomość.</p>

    <button id="successButton">Pokaż Sukces</button>
    <button id="warningButton">Pokaż Ostrzeżenie</button>
    <button id="clearButton">Wyczyść</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

Teraz zaktualizuj script.js:

const messageElement = document.getElementById("message");
const successButton = document.getElementById("successButton");
const warningButton = document.getElementById("warningButton");
const clearButton = document.getElementById("clearButton");

function showSuccessMessage() {
  messageElement.textContent = "Sukces! DOM został zaktualizowany.";
  messageElement.className = "message success";
}

function showWarningMessage() {
  messageElement.textContent = "Ostrzeżenie! JavaScript dotyka strony.";
  messageElement.className = "message warning";
}

function clearMessage() {
  messageElement.textContent = "Kliknij przycisk, aby zmienić tę wiadomość.";
  messageElement.className = "message";
}

successButton.addEventListener("click", showSuccessMessage);
warningButton.addEventListener("click", showWarningMessage);
clearButton.addEventListener("click", clearMessage);

Odśwież przeglądarkę.

Kliknij przyciski.

Wiadomość się zmienia.

Styl się zmienia.

Strona reaguje.

To DOM w akcji.

JavaScript już nie tylko mówi.

On działa.

Niebezpieczne.

Ale piękne.

Jak Działa Ten Kod

Te linie znajdują elementy:

const messageElement = document.getElementById("message");
const successButton = document.getElementById("successButton");
const warningButton = document.getElementById("warningButton");
const clearButton = document.getElementById("clearButton");

Ta funkcja pokazuje wiadomość sukcesu:

function showSuccessMessage() {
  messageElement.textContent = "Sukces! DOM został zaktualizowany.";
  messageElement.className = "message success";
}

Ta funkcja pokazuje ostrzeżenie:

function showWarningMessage() {
  messageElement.textContent = "Ostrzeżenie! JavaScript dotyka strony.";
  messageElement.className = "message warning";
}

Ta funkcja resetuje wiadomość:

function clearMessage() {
  messageElement.textContent = "Kliknij przycisk, aby zmienić tę wiadomość.";
  messageElement.className = "message";
}

Te linie łączą przyciski z funkcjami:

successButton.addEventListener("click", showSuccessMessage);
warningButton.addEventListener("click", showWarningMessage);
clearButton.addEventListener("click", clearMessage);

To bardzo ważny schemat:

Użytkownik klika.

Funkcja się uruchamia.

DOM się zmienia.

Strona się aktualizuje.

To frontend development w jednej małej kanapce.

Typowe Błędy

Zapominanie o # w querySelector

Źle:

const title = document.querySelector("mainTitle");

Poprawnie:

const title = document.querySelector("#mainTitle");

Jeśli wybierasz id za pomocą querySelector, użyj #.

Tak jak w CSS.

Bez # JavaScript szuka elementu o nazwie <mainTitle>.

Który prawdopodobnie nie istnieje.

Chyba że twój HTML stał się bardzo kreatywny.

Próba Zmieniania Elementu, Zanim Istnieje

Jeśli skrypt uruchomi się przed załadowaniem HTML, JavaScript może nie znaleźć elementu.

Dlatego często umieszczamy to na końcu body:

<script src="script.js"></script>

Po elementach HTML.

Dobrze.

Prosto.

Mniej dramatu.

Używanie textContent, Gdy Chcesz HTML

To:

element.textContent = "<strong>Cześć</strong>";

pokaże tekst dokładnie tak:

<strong>Cześć</strong>

Nie utworzy pogrubionego tekstu.

Do HTML użyj:

element.innerHTML = "<strong>Cześć</strong>";

Ale pamiętaj:

Używaj innerHTML ostrożnie.

Jest potężne.

A potężne rzeczy mogą tworzyć potężne bóle głowy.

Używanie className i Przypadkowe Usuwanie Wszystkich Klas

To:

messageElement.className = "success";

zastępuje wszystkie klasy.

Jeśli element miał:

<p class="message"></p>

teraz ma tylko:

<p class="success"></p>

To może zepsuć stylowanie.

Dlatego użyliśmy:

messageElement.className = "message success";

Bo chcemy zachować obie klasy.

Szczegóły mają znaczenie.

CSS patrzy.

Praktyka

Utwórz stronę z:

Po kliknięciu przycisku:

Przykładowy HTML:

<h1 id="title">Stary Tytuł</h1>
<p id="text">Stary tekst.</p>
<button id="changeButton">Zmień</button>

Przykładowy JavaScript:

const titleElement = document.getElementById("title");
const textElement = document.getElementById("text");
const changeButton = document.getElementById("changeButton");

function changeContent() {
  titleElement.textContent = "Nowy Tytuł";
  textElement.textContent = "Ten akapit został zmieniony przez JavaScript.";
  textElement.classList.add("highlight");
}

changeButton.addEventListener("click", changeContent);

Uruchom to.

Zmień to.

Zepsuj to.

Napraw to.

DOM staje się łatwiejszy tylko przez praktykę.

Nie stanie się łatwiejszy od patrzenia na niego.

Niestety.

Próbowałem.

Mini Wyzwanie

Zbuduj małe pudełko powiadomień.

Strona powinna mieć:

Kiedy użytkownik kliknie “Pokaż Info”:

Pokazano wiadomość informacyjną.

Kiedy użytkownik kliknie “Pokaż Błąd”:

Coś poszło nie tak.

Kiedy użytkownik kliknie “Reset”:

Brak wiadomości.

Użyj klas do zmiany stylu.

Na przykład:

.info {
  background-color: #eff6ff;
}

.error {
  background-color: #fef2f2;
}

To wyzwanie jest bardzo blisko prawdziwej pracy.

Strony ciągle pokazują wiadomości.

Sukcesy.

Ostrzeżenia.

Błędy.

Formularze.

Powiadomienia.

Małe pudełka emocjonalnych obrażeń.

DOM obsługuje je wszystkie.

Podsumowanie

Dzisiaj nauczyłeś się:

To ogromny krok.

DOM to miejsce, gdzie JavaScript staje się widoczny.

Przed DOM JavaScript to logika.

Z DOM JavaScript staje się interakcją.

Przyciski.

Wiadomości.

Karty.

Menu.

Formularze.

Wszystko zaczyna się tutaj.

Strona już nie siedzi bez ruchu.

Ona żyje.

Lekko dramatycznie.

Ale żyje.

Następna Lekcja

W następnej lekcji nauczymy się zdarzeń.

Zdarzenia to sposób, w jaki JavaScript reaguje na użytkowników.

Kliknięcia.

Pisanie.

Wysyłanie formularzy.

Ruch myszy.

Naciskanie klawiszy.

Krótko mówiąc, zdarzenia to sposób, w jaki przeglądarka mówi:

“Coś się stało.”

A JavaScript odpowiada:

“Mam na to funkcję.”