Drzewo DOM (Document Object Model)

Czym jest Document Object Model (DOM)?

DOM to reprezentacja struktury dokumentu HTML w pamięci przeglądarki. Każdy element HTML, atrybut oraz fragment tekstu jest traktowany jako oddzielny węzeł (Node) w drzewiastej strukturze.

Kluczowe metody pobierania i manipulacji DOM:

• document.getElementById('id') – pobranie pojedynczego elementu po identyfikatorze.
• document.querySelector('.klasa') – pobranie pierwszego elementu pasującego do selektora CSS.
• document.querySelectorAll('div > p') – pobranie statycznej listy wszystkich elementów (NodeList).
• document.createElement('tag') – utworzenie nowego węzła elementu.
• element.appendChild(nowyWęzeł) – dodanie węzła na koniec dzieci rodzica.
• element.innerHTML – pobranie/ustawienie zawartości HTML jako string.
• element.textContent – bezpieczne pobranie/ustawienie samego czystego tekstu.

const kontener = document.querySelector('#glowny');
const nowyAkapit = document.createElement('p');
nowyAkapit.textContent = 'Tekst wygenerowany dynamicznie!';
nowyAkapit.classList.add('wyrozniony');
kontener.appendChild(nowyAkapit);

Najczęstsze pułapki na egzaminie INF.03:

• querySelectorAll zwraca kolekcję NodeList, po której można iterować za pomocą .forEach(), natomiast getElementsByClassName zwraca kolekcję HTMLCollection.
• Pamiętaj o różnicy między innerHTML (interpretuje tagi HTML) a textContent (traktuje wszystko jako bezpieczny tekst).