Obiekt document w JavaScript

Obiekt document w JavaScript jest kluczowym elementem modelu obiektowego dokumentu (DOM). Umożliwia dostęp do struktury dokumentu HTML, jego stylów, zawartości oraz umożliwia modyfikację tych elementów w czasie rzeczywistym. W tej lekcji przeanalizujemy różne metody dostępne w obiekcie document, które są niezwykle przydatne w codziennym programowaniu webowym.

Przykład kodu: Modyfikacja zawartości elementu

Opis przykładu: Pokażemy, jak zmienić tekst w elemencie HTML za pomocą metody getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zmiana zawartości elementu</title>
</head>
<body>
    <div id="example">Tekst przed zmianą</div>
    <button onclick="changeText()">Zmień Tekst</button>

    <script>
        // Funkcja zmieniająca tekst elementu o id 'example'
        function changeText() {
            const element = document.getElementById('example');
            // Zmiana zawartości tekstowej elementu
            element.textContent = 'Tekst po zmianie';
        }
    </script>
</body>
</html>

W tym przykładzie użyliśmy metody getElementById do znalezienia elementu na stronie, a następnie zmieniliśmy jego zawartość tekstową za pomocą właściwości textContent.

Przykład kodu: Dodawanie nowego elementu

Opis przykładu: Demonstracja sposobu dodawania nowego elementu do DOM za pomocą metod createElement i appendChild.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodawanie elementu do DOM</title>
</head>
<body>
    <div id="container"></div>
    <button onclick="addElement()">Dodaj Element</button>

    <script>
        // Funkcja dodająca nowy element do kontenera
        function addElement() {
            // Tworzenie nowego elementu div
            const newElement = document.createElement('div');
            // Dodanie tekstu do nowego elementu
            newElement.textContent = 'Nowy element';
            // Znalezienie kontenera, do którego zostanie dodany element
            const container = document.getElementById('container');
            // Dodanie nowego elementu do kontenera
            container.appendChild(newElement);
        }
    </script>
</body>
</html>

Tutaj skorzystaliśmy z metody createElement do stworzenia nowego elementu div oraz z metody appendChild do dodania tego elementu do istniejącego kontenera.

Podsumowanie

Obiekt document jest fundamentem interakcji z dokumentem HTML za pomocą JavaScript. Pozwala na wyszukiwanie elementów, ich modyfikację, dodawanie nowych oraz manipulowanie stylami i zachowaniami. Zrozumienie i umiejętne wykorzystanie metod obiektu document otwiera przed programistami możliwości tworzenia dynamicznych i interaktywnych stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top