Document Object Model - DOM - Medianauka.pl
Logo Serwisu Media Nauka


Document Object Model - DOM

Oprócz tego, że przeglądarka wczytuje i wyświetla zawartość dokumentu HTML z użyciem arkuszy stylów CSS, dodatkowo zapamiętuje MODEL danego dokutemu, czyli zapamiętuje znaczniki, ich atrybuty, kolejność, hierarchię.

Każdy znacznik, atrybut i tekst DOM traktuje jak odrębny obiekt, nazywany węzłem (node).

Model DOM - struktura drzewiasta dokumentu

Poniższy dokument HTML można przedstawić jako strukturę drzewa.

<html>
<head>
<title>Model DOM</title>
</head>
<body> <p>To jest <strong>ważny tekst</strong></p> </body> </html>

Model DOM jest odrębnym standardem opracowanym przez W3C. Nie jest częścią specyfikacji JavaSvript.

Dzięki istnieniu takiej struktury strony internetowej przy użyciu JavaScript będziemy mogli odwoływać się do każdego węzła, tworzyć je, usuwać, zmieniać, słowem ożywić znacznie nasz internetowy projekt. Zanim jednak pokażę jak to zrobić, kilka słów dobrej rady.

Problemy z DOM i JavaScript

Jeżeli w naszym skrypcie odwołamy się do elementu struktury DOM (węzła) i nasz skrypt się załaduje, a sama strona (w tym struktura DOM) jeszcze nie, to nasz skrypt nie zadziała prawidłowo. Bo i jak ma odnieść się do elementów, których jeszcze nie ma w obiekcie? Jak się przed tym uchronić?

W JavaScript możemy obsługiwać zdarzenia. Będzie o nich później mowa, ale już teraz muszę wspomnieć o jednym z nich. Chodzi o zdarzenie (event) DOMContentLoaded. Zdarzenie DOMContentLoaded zachodzi wówczas, gdy przeglądarka załaduje wszystkie elementy DOM strony internetowej. Wtedy możemy bezpiecznie uruchamiać nasz skrypt. Nasz skrypt powinien się zatem znaleźć w ciele funkcji, wywoływanej przez zdarzenie DOMContentLoaded, czyli w następującej strukturze:

Struktura obsługi zdarzenia DOMContentLoaded.

<script>
	document.addEventListener("DOMContentLoaded", function() {
          //... tutaj wstawiamy nasz skrypt ...
});
</script>

Co istotne, nie musimy czekać na załadowanie grafiki, czy innych "dużych" elementów strony, aby nasz skrypt zadziałał prawidłowo.

Przykład 1 - wywołanie zdarzenia DOMContentLoaded

<html>
<head>
	<meta charset="utf-8">
	<title>Zdarzenie DOMContentLoaded</title>
</head>
<body> <h1>Gdzie umieszczać skrypty JavaScript, które korzystają z elementów DOM?</h1>
<p>Ta strona pokazuje komunikat, który uruchamia się dopiero po załadowaniu całej struktury DOM strony internetowej.</p> <script> document.addEventListener("DOMContentLoaded", function() {
alert("struktura DOM została załadowana do przeglądarki!")
}); </script> </body> </html>
Otwórz Pobierz


Do pobierania jednego lub całych grup elementów strony HTML służą metody: getElementById, getElementByTagName, querySelector i querySelectorAll. Wszystkie omówię w kolejnym artykule.


© Media Nauka, 2016-11-01, ART-3273






Polecamy