DOM w JavaScript

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

DOM w JavaScript

DOM, czyli Document Object Model, to obiektowy model dokumentu HTML. Dzięki DOM JavaScript może odczytywać, zmieniać, dodawać i usuwać elementy strony internetowej.

Przeglądarka zamienia kod HTML na strukturę drzewa. Każdy znacznik, np. <body>, <p>, <img> czy <a>, staje się węzłem lub elementem, do którego można uzyskać dostęp z poziomu JavaScript.

Przykład dokumentu HTML

<body>
  <p>pierwszy paragraf</p>
  <p>drugi paragraf</p>
</body>

W DOM element <body> zawiera dwa elementy <p>. JavaScript może je pobrać i zmodyfikować.

Popularne metody dostępu do elementów

document.getElementById("naglowek");
document.getElementsByTagName("p");
document.getElementsByClassName("opis");
document.querySelector("p");
document.querySelectorAll("p");

Każda z tych metod służy do wyszukiwania elementów, ale działa według innego kryterium:

  • getElementById() — pobiera element po atrybucie id,
  • getElementsByTagName() — pobiera elementy po nazwie znacznika,
  • getElementsByClassName() — pobiera elementy po klasie CSS,
  • querySelector() — pobiera pierwszy element pasujący do selektora CSS,
  • querySelectorAll() — pobiera wszystkie elementy pasujące do selektora CSS.

Modyfikacja elementu

const akapit = document.getElementsByTagName("p")[0];
akapit.textContent = "Zmieniona treść";

Ten kod pobiera pierwszy akapit i zmienia jego tekst.

Znaczenie na egzaminie INF.03

W zadaniach egzaminacyjnych często trzeba rozpoznać, której metody użyć do pobrania elementu strony. Jeśli element ma id, używa się getElementById(). Jeśli trzeba pobrać pierwszy element danego typu, np. pierwszy <p>, stosuje się getElementsByTagName("p")[0].