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>

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.

Inne zagadnienia z tej lekcji

Pobieranie elementów DOM

W jaki sposób w JavaScript można pobierać i modyfikować elementy struktury DOM strony internetowej? Służą do tego cztery właściwości w JavaScript: getElementById, getElementByTagName, querySelector i querySelectorAll.

Relacje między elementami DOM

Opis relacji miedzy węzłami w strukturze DOM w Javascript. Zobaczymy jakie zachodzą relacje miedzy tymi elementami. Artykuł zawiera listę właściwości węzłów i przykłady ich stosowania.

Tworzenie i usuwanie elementów

Opis metod tworzenia i usuwania węzłów w dokumencie HTML przy użyciu JavaScript. W tym artykule pokazuję, jak stworzyć, usunąć albo podmienić element strony internetowej.

Modyfikowanie elementów

Opis metod modyfikowania elementów strony przy użyciu JavaScript. W tym artykule pokazuję kilka metod modyfikacji elementów strony internetowej z poziomu skryptu.