💯 window und document

In JavaScript sind window und document zwei der wichtigsten globalen Objekte im Browser, die Entwicklern den Zugriff auf die Struktur und das Verhalten einer Webseite ermöglichen. Sie spielen eine zentrale Rolle in der client-seitigen Webentwicklung, insbesondere im Umgang mit dem DOM (Document Object Model). Hier eine Übersicht:

1. Das window Objekt

window ist das globale Objekt, das den Browser selbst repräsentiert. Es enthält alles, was mit dem Browserfenster zu tun hat, und ist das übergeordnete Objekt, das viele andere Funktionen und Objekte umfasst, einschließlich document.

Eigenschaften und Methoden von window:

• Globale Funktionen: Funktionen wie alert(), setTimeout(), setInterval() und console.log() sind Methoden von window.

  window.alert('Dies ist eine Warnung!');
  

  Da window das globale Objekt ist, kannst du Funktionen wie alert() auch ohne das Präfix window aufrufen.

• Globale Variablen: Alle global deklarierten Variablen und Funktionen werden als Eigenschaften von window gespeichert.

  var myVar = 'Hallo!';
  console.log(window.myVar); // Ausgabe: Hallo!
  

• Navigations- und Fenstersteuerung:
  • window.location: Steuert die aktuelle URL des Fensters.
  • window.history: Ermöglicht die Navigation durch den Browserverlauf.
  • window.open(): Öffnet ein neues Fenster oder Tab.
• Größe und Position des Fensters:
  • window.innerHeight und window.innerWidth: Gibt die Größe des Ansichtsfensters (Viewport) zurück.
  • window.scrollTo(): Scrollt zu einer bestimmten Position auf der Seite.

Übrigens hat webdev-guide ein ausführliches Tutorial über console.log hochgeladen.

Beispiel:

console.log(window.innerWidth); // Gibt die Breite des Ansichtsfensters in Pixel zurück
window.location.href = 'https://www.example.com'; // Navigiert zu einer neuen URL

2. Das document Objekt

document ist ein Kindobjekt von window und repräsentiert das Document Object Model (DOM) der geladenen Webseite. Es stellt die Schnittstelle dar, über die du auf die Struktur der HTML-Dokumente zugreifen und diese manipulieren kannst.

Eigenschaften und Methoden von document:

• Zugriff auf Elemente:
  • document.getElementById(): Sucht ein Element anhand seiner ID.
  • document.querySelector(): Sucht das erste Element, das einem CSS-Selektor entspricht.
  • document.querySelectorAll(): Sucht alle Elemente, die einem CSS-Selektor entsprechen.
• Manipulation von Elementen:
  • document.createElement(): Erstellt ein neues HTML-Element.
  • document.appendChild(): Fügt ein Element als Kind eines anderen Elements hinzu.
  • element.innerHTML: Ändert den HTML-Inhalt eines Elements.
• DOM-Ereignisse:
  • document.addEventListener(): Fügt Event-Listener wie click, keydown oder DOMContentLoaded hinzu.

    document.addEventListener('click', function() {
    console.log('Seite wurde angeklickt!');
    });
    

• Dokumentinformationen:
  • document.title: Gibt den Seitentitel zurück oder ändert ihn.
  • document.cookie: Zugriff auf die Cookies der Webseite.

Beispiel:

const heading = document.getElementById('title'); // Wählt ein Element mit der ID "title" aus
heading.innerHTML = 'Neuer Titel'; // Ändert den Textinhalt des ausgewählten Elements

Unterschiede zwischen window und document:

• window repräsentiert das gesamte Browserfenster, inklusive des globalen Kontexts und alles, was damit verbunden ist (z. B. Cookies, URL, Navigationsverlauf).
• document bezieht sich speziell auf die Inhalte und die Struktur der aktuellen Webseite, die im Browser geladen ist. Es erlaubt die Manipulation und das Lesen von HTML-Elementen und Attributen.

Zusammenfassung der Unterschiede:

Beispiel: Zusammenarbeit von window und document

window.addEventListener('resize', function() {
  console.log('Fenstergröße geändert:', window.innerWidth);
});

document.addEventListener('DOMContentLoaded', function() {
  console.log('Das DOM wurde vollständig geladen und geparst');
});

In diesem Beispiel wird das window-Objekt verwendet, um auf die Fenstergröße zu reagieren, und das document-Objekt, um sicherzustellen, dass der DOM-Inhalt vollständig geladen ist.

Mit diesen Informationen hast du einen Überblick über die wichtigen Unterschiede und Beziehungen zwischen window und document. Beide sind unverzichtbare Werkzeuge in der Webentwicklung, um das Verhalten des Browsers und der Webseite zu kontrollieren.