Ostatnia aktualizacja 6 lutego, 2024
JavaScript i model obiektowy dokumentu (DOM) to fundamenty, które umożliwiają tworzenie dynamicznych oraz interaktywnych stron internetowych. Programiści przy pomocy języka JavaScript mają możliwość modyfikowania w czasie rzeczywistym DOM, czyli struktury strony. Pozwala to na aktualizowanie zawartości, stylów oraz reagowanie na działania użytkownika bez konieczności odświeżania strony. Poniżej wyjaśniamy, jak to wygląda w praktyce.
Wprowadzenie do DOM z wykorzystaniem JavaScript
Model obiektowy dokumentu (Document Object Model) to programowy interfejs dla stron internetowych. Reprezentuje strukturę dokumentu HTML lub XML jako drzewo obiektów, w którym każdy węzeł jest częścią strony internetowej. Za pomocą JavaScript i DOM można dynamicznie zmieniać treści, struktury oraz styl strony.
Jak wygląda przykładowe wybieranie elementu?
const naglowek = document.getElementById('naglowek');
const akapity = document.querySelectorAll('p');Tutaj getElementById pozwala na dostęp do elementu przez jego identyfikator, a querySelectorAll umożliwia wybieranie elementów pasujących do określonego selektora CSS, zwracając NodeListę zawierającą wszystkie znalezione elementy.
Jak działa DOM?
Kiedy przeglądarka wczytuje stronę internetową, parsuje HTML i tworzy na jego podstawie model DOM, który staje się interfejsiem, przez który JavaScript może wchodzić w interakcje z zawartością strony. Dzięki temu mechanizmowi strona internetowa nie jest statycznym dokumentem, ale żywym i reagującym środowiskiem, które może być modyfikowane w czasie rzeczywistym.
Modyfikowanie zawartości DOM za pomocą JavaScript
JavaScript pozwala na modyfikację zawartości elementów DOM. Można to zrobić na kilka sposobów, na przykład za pomocą właściwości innerText lub innerHTML.
naglowek.innerText = 'Nowy tytuł strony';To zmieni tekst w elemencie o identyfikatorze ‘naglowek’ na “Nowy tytuł strony”.
Sprawdź też: Praca zdalna
Dalsza część tekstu znajduje się pod materiałem wideo:
Reagowanie na zdarzenia
Interakcje użytkowników, takie jak kliknięcia myszą czy naciśnięcia klawiszy, mogą być przechwytywane przy pomocy słuchaczy zdarzeń. Pozwala to na tworzenie interaktywnych interfejsów użytkownika.
const przycisk = document.getElementById('przycisk');
przycisk.addEventListener('click', function() {
alert('Kliknięto przycisk');
});W tym przykładzie dodajemy słuchacza zdarzeń do przycisku, tak aby wyświetlić alert, kiedy użytkownik na niego kliknie.
Manipulacja stylami
JavaScript pozwala także na manipulację stylami elementów. Umożliwia to dynamiczne zmiany wyglądu strony.
naglowek.style.color = 'blue';
naglowek.style.fontSize = '24px';Powyższy kod zmieni kolor tekstu nagłówka na niebieski i ustawi jego rozmiar czcionki na 24 piksele.
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
Java a JavaScript. Czym się różnią? To nie to samo.
Dynamiczne aktualizacje danych z użyciem JavaScript i setInterval
