61. Czym jest Document Object Model (DOM) i jak wchodzi w interakcję z JavaScript?

Czym jest Document Object Model (DOM) i jak wchodzi w interakcję z JavaScript?

Document Object Model (DOM) to interfejs programistyczny dla dokumentów internetowych. Reprezentuje stronę w taki sposób, że programy mogą zmieniać strukturę, styl i treść dokumentu. DOM przedstawia dokument jako drzewo węzłów, gdzie każdy węzeł jest obiektem reprezentującym część dokumentu.

Interakcja z JavaScript

JavaScript może manipulować DOM, aby dynamicznie aktualizować treść i strukturę strony internetowej. Ta interakcja jest kluczowa dla tworzenia dynamicznych i interaktywnych aplikacji internetowych. Oto kilka kluczowych sposobów, w jakie JavaScript wchodzi w interakcję z DOM:

1. Wybieranie Elementów

   • JavaScript może wybierać elementy z DOM za pomocą metod takich jak document.getElementById(), document.querySelector() i document.querySelectorAll(). Na przykład:

     const header = document.getElementById('main-header');
     const items = document.querySelectorAll('.list-item');

2. Modyfikowanie Elementów

   • Możesz zmieniać treść HTML, style CSS i atrybuty elementów DOM. Na przykład:

     header.textContent = 'Nowy Nagłówek';
     header.style.color = 'niebieski';

3. Obsługa Zdarzeń

   • JavaScript może dodawać nasłuchiwacze zdarzeń do elementów DOM, aby reagować na działania użytkownika, takie jak kliknięcia, przesyłanie formularzy czy naciśnięcia klawiszy. Na przykład:

     header.addEventListener('click', () => {
       alert('Nagłówek kliknięty!');
     });

4. Tworzenie Nowych Elementów

   • Możesz tworzyć nowe elementy DOM i dodawać je do dokumentu. Na przykład:

     const newElement = document.createElement('div');
     newElement.textContent = 'Jestem nowym elementem';
     document.body.appendChild(newElement);

5. Usuwanie Elementów

   • Elementy można usuwać z DOM za pomocą metod takich jak removeChild() lub remove(). Na przykład:

     document.body.removeChild(newElement);
     // lub
     newElement.remove();

Możliwość manipulacji DOM za pomocą JavaScript umożliwia tworzenie dynamicznych interfejsów użytkownika i interaktywnych elementów na stronach internetowych.