Jaka jest różnica między window a document w JavaScript

By /

JavaScript

W świecie JavaScript, window i document są dwoma fundamentalnymi obiektami, które często mogą prowadzić do pewnego zamieszania wśród programistów, szczególnie tych, którzy dopiero rozpoczynają swoją przygodę z tym językiem. Choć mogą się wydawać podobne, pełnią bardzo różne role w kontekście strony internetowej. W tej lekcji omówimy kluczowe różnice między tymi dwoma obiektami i zobaczymy, jak są one wykorzystywane w praktyce.

Różnice kluczowe

  • window: Jest to globalny obiekt reprezentujący okno przeglądarki, zawiera metody, właściwości i obiekty związane z bieżącym oknem przeglądarki. window pełni rolę kontenera dla wszystkiego, co jest związane z oknem przeglądarki, w tym zarówno document, jak i inne elementy, takie jak location czy history.
  • document: Jest to obiekt reprezentujący dokument HTML załadowany w oknie przeglądarki. Dostarcza interfejs do struktury dokumentu, umożliwiając manipulację jego zawartością. document jest częścią obiektu window i można do niego uzyskać dostęp za pomocą window.document.

Przykład zastosowania

Poniżej znajduje się prosty przykład kodu HTML zintegrowanego z JavaScript, który demonstruje użycie obiektów window i document

<!DOCTYPE html>
<html>
<head>
    <title>Przykład użycia window i document</title>
</head>
<body>
    <div id="example">Przykładowy tekst</div>
    <script>
        // Wyświetlenie wysokości i szerokości okna przeglądarki
        console.log("Wysokość okna: " + window.innerHeight);
        console.log("Szerokość okna: " + window.innerWidth);

        // Zmiana treści diva za pomocą document
        document.getElementById("example")
                   .innerText = "Zmieniony tekst";

        // Przykład użycia window do przekierowania
        // window.location.href = 'https://www.example.com';
    </script>
</body>
</html>

W powyższym przykładzie używamy window do uzyskania informacji o rozmiarach okna przeglądarki, co jest przykładem wykorzystania window do interakcji z interfejsem użytkownika na poziomie okna przeglądarki. Następnie, za pomocą document, manipulujemy DOM, zmieniając tekst w elemencie div, co demonstruje, jak document pozwala na manipulację zawartością strony.

Podsumowanie

Podstawową różnicą między window a document w JavaScript jest to, że window reprezentuje okno przeglądarki i jest najwyższym poziomem w hierarchii obiektów, podczas gdy document dotyczy konkretnego dokumentu (strony) załadowanego w oknie i pozwala na manipulację jego zawartością. Rozumienie tych różnic jest kluczowe dla efektywnego programowania interaktywnych i dynamicznych stron internetowych.

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

Powiązane artykuły

Scroll to Top