Manipulacja DOM i BOM

INF.03.8 (3) — Manipulacja strukturą dokumentu i oknem przeglądarki

DOMDocument Object Model

DOM jest modelem programistycznym dla dokumentów HTML. Reprezentuje stronę jako drzewo węzłów, gdzie każdy węzeł jest elementem, atrybutem lub tekstem, dzięki czemu JavaScript może dynamicznie zmieniać zawartość, strukturę i styl strony. [web:20][web:25]

DOMPobieranie i modyfikacja elementów

1. Pobieranie elementów (querying)

Podstawowe metody wyszukiwania węzłów w drzewie DOM: [web:21][web:25]

  • document.getElementById('id') — najszybsza metoda po identyfikatorze.
  • document.querySelector('.klasa') — pierwszy pasujący element (selektory CSS).
  • document.querySelectorAll('a') — lista wszystkich pasujących elementów.

2. Modyfikacja treści

const tytul = document.getElementById('glowny-tytul');

// Zmiana tekstu (tylko tekst)
tytul.textContent = 'Nowa nazwa modułu';

// Zmiana HTML (może zawierać tagi)
tytul.innerHTML = '<span>Witaj!</span>';

3. Modyfikacja stylu i atrybutów

const przycisk = document.querySelector('button');

// Zmiana stylu CSS
przycisk.style.backgroundColor = 'red';

// Dodawanie/usuwanie klas CSS
przycisk.classList.add('aktywny');
przycisk.classList.remove('ukryty');

DOMTworzenie i usuwanie elementów

Tworzenie nowego węzła

Budowa dynamicznej struktury (np. dodawanie pozycji do listy): [web:21][web:25]

// 1. Utwórz element
const nowyElement = document.createElement('li');

// 2. Dodaj zawartość
nowyElement.textContent = 'Nowa pozycja';

// 3. Znajdź rodzica
const lista = document.getElementById('lista-ul');

// 4. Dołącz dziecko do rodzica
lista.appendChild(nowyElement);

Usuwanie elementu

const elementDoUsuniecia = document.getElementById('stary-div');
elementDoUsuniecia.remove(); // Nowoczesny sposób usuwania z DOM

BOMBrowser Object Model

BOM umożliwia JavaScriptowi interakcję z oknem przeglądarki i jej środowiskiem, np. adresem URL, historią i informacjami o przeglądarce. [web:23][web:26]

  • window — obiekt globalny reprezentujący okno przeglądarki.
  • location — adres URL, np. location.href, location.reload().
  • history — historia sesji, np. history.back().
  • navigator — informacje o przeglądarce i systemie (język, user-agent). [web:23]

ĆwiczenieZadania z DOM i BOM

Zadanie 1: Modyfikacja stylu i tekstu

W pliku HTML utwórz przycisk o ID zmien-btn i paragraf o ID status-tekst. Po kliknięciu w przycisk:

Zadanie 2: Dynamiczna lista To‑Do

Utwórz pustą listę <ul id="lista-zadan"></ul>. Napisz funkcję, która po kliknięciu przycisku:

Zadanie 3: Interakcja z BOM

Utwórz przycisk, który po kliknięciu pyta użytkownika o potwierdzenie (użyj window.confirm()). Jeśli użytkownik potwierdzi, strona ma zostać przeładowana (użyj location.reload()). [web:23][web:26]

LogikaInstrukcje warunkowe i switch

1. Instrukcja if...else if...else

Pozwala na wykonanie różnych bloków kodu w zależności od prawdziwości warunku. [web:22]

Operator warunkowy (ternary): skrócony zapis prostego if/else, składnia: warunek ? wyrazenieTrue : wyrazenieFalse.

const wiek = 19;

// Zwykły if/else
if (wiek >= 18) {
  console.log("Pełnoletni.");
} else {
  console.log("Niepełnoletni.");
}

// Operator trójargumentowy (ternary)
const status = wiek >= 18 ? 'Adult' : 'Minor';
console.log(status); // Adult

2. Instrukcja switch

Przydatna, gdy porównujemy jedną zmienną z wieloma możliwymi wartościami. [web:22]

const dzien = 'Pon';
let nazwa = '';

switch (dzien) {
  case 'Pon':
    nazwa = 'Poniedziałek';
    break;
  case 'Wt':
    nazwa = 'Wtorek';
    break;
  default:
    nazwa = 'Inny dzień';
}
console.log(nazwa); // Poniedziałek

PętleIteracja (powtarzalne zadania)

Pętle pozwalają wielokrotnie wykonywać ten sam fragment kodu, np. przy pracy z tablicami. [web:22]

1. Pętla for (klasyczna)

for (let i = 0; i < 5; i++) {
  console.log("Licznik: " + i);
}
// Wypisze: 0, 1, 2, 3, 4

2. Pętla while

let licznik = 0;
while (licznik < 3) {
  console.log("Czekanie...");
  licznik++;
}

3. Pętla for...of (dla tablic)

const produkty = ['Mysz', 'Klawiatura', 'Monitor'];

for (const p of produkty) {
  console.log(`Produkt: ${p}`);
}

ĆwiczenieZadania z warunków i pętli

Zadanie 1: Walidacja logiczna

Napisz funkcję sprawdzDostep(wiek, czyPlaci), która zwraca odpowiedni komunikat.

function sprawdzDostep(wiek, czyPlaci) {
    if (wiek > 60 || czyPlaci) {
        return "Dostęp przyznany";
    } else {
        return "Brak dostępu";
    }
}

console.log(sprawdzDostep(25, true));  // Dostęp przyznany
console.log(sprawdzDostep(65, false)); // Dostęp przyznany
console.log(sprawdzDostep(15, false)); // Brak dostępu

Zadanie 2: Suma z pętlą for

Użyj pętli for, aby policzyć sumę liczb od 1 do 10.

let suma = 0;

for (let i = 1; i <= 10; i++) {
    suma = suma + i; // Można też: suma += i;
}

console.log("Suma od 1 do 10 wynosi: " + suma); // 55

Zadanie 3: Iteracja i warunki

Mając tablicę ocen (np. [5, 4, 3, 2, 5, 6]), policz liczbę ocen pozytywnych (≥ 4) z użyciem for...of i if.

const oceny = [5, 4, 3, 2, 5, 6];
let pozytywne = 0;

for (const ocena of oceny) {
    if (ocena >= 4) {
        pozytywne++;
    }
}

console.log("Liczba ocen pozytywnych: " + pozytywne); // 4

MateriałyDOM, BOM, warunki i pętle

  • MDN Web Docs: DOM i wprowadzenie do skryptów manipulujących dokumentem. [web:21]
  • MDN Web Docs: Instrukcje warunkowe i pętle w JavaScript. [web:22]
  • BOM: Praca z window, location, history, navigator. [web:23][web:26]
Materiały: Manipulacja DOM i BOM · Opracowanie na podstawie wymagań INF.03