Wprowadzenie do DOM w JavaScript

Dzisiaj kolejny krok do przodu, bo przed Tobą ważny temat - DOM, czyli Document Object Model, a właściwie obiektowy model dokumentu. W tym artykule postaram się wprowadzić Cie w DOM, a w kolejnych artykułach będę opisywał bardziej szczegółowe operację. Zaczynajmy.

Za pomocą DOM możesz zmieniać wygląd strony internetowej dzięki skryptom JS. Można powiedzieć, że DOM jest obiektem JS, a więc możemy w nim wszystko zmieniać. DOM jest odzwierciedleniem strony, przeglądarka analizując HTML i CSS konwertuje go właśnie w DOM.

Każdy element HTML wewnątrz DOM'u jest nazywany węzłem. Węzły mogą mieć rodziców, rodzeństwo oraz potomków.

Zaprezentuje Ci przykładowy kod html, a na nim opiszę pokrewieństwo pomiędzy węzłami:

<!DOCTYPE html>
<html
<head>
    <title>Document Object Model</title>
</head>
<body>

    <div id="container">
        <button id="zapisz">Zapisz</button>
        <button id="anuluj">Anuluj</button>
    </div>

    <script src="js/skrypt.js"></script>
</body>
</html>

W powyższym kodzie nie ma nic skomplikowanego. Na górze znajduje się standardowa sekcja head, a poniżej body. W body jest div container, a w nim znajdują się 2 przyciski zapisz oraz anuluj. Poniżej jest jeszcze odwołanie do pliku ze skryptami JS. Na powyższym przykładzie container jest potomkiem body, ale również jest rodzicem buttona zapisz oraz buttona anuluj. Oba buttony są rodzeństwem.

Dzięki językowi JavaScript, możesz wyszukiwać elementy w drzewie, a następnie je modyfikować. Możesz również stworzyć i wstawić na stronę nowy element, a nawet modyfikować style CSS, wszystkie te operację przedstawię Ci w najbliższych artykułach na blogu.

Jeżeli chcesz podejrzeć drzewko DOM wybranej strony internetowej. Wystarczy w przeglądarce kliknąć przycisk F12, a następnie w zależności od przeglądarki przejść w zakładkę elementy w chrome, albo inspektor w firefox'ie.

dom-elements

W ten sposób możesz dynamicznie modyfikować wartości różnych węzłów.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Algorytm FizzBuzz w JavaScript.
Następny artykuł - Operacje na obiekcie DOM w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Wprowadzenie do DOM w JavaScript

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły