💯 window and document

In JavaScript, window and document are two very important global objects that allow developers to access the structure and behavior of a web page. They play a central role in client-side web development, especially when dealing with the DOM (Document Object Model). Here is an overview:

1. The window object

window is the global object that represents the browser itself. It contains everything related to the browser window and is the parent object that includes many other functions and objects, including document.

Properties and methods of window:

• Global functions: Functions such as alert(), setTimeout(), setInterval() and console.log() are methods of window.

window.alert('This is an alert!');

Since window is the global object, you can call functions like alert() without the window prefix.

• Global variables: All globally declared variables and functions are stored as properties of window.

var myVar = 'Hello!';
console.log(window.myVar); // Output: Hello!

• Navigation and window control:
• window.location: Controls the current URL of the window.
• window.history: Allows navigation through the browser history.

• window.open(): Opens a new window or tab.

• Window size and position:
• window.innerHeight and window.innerWidth: Returns the size of the viewport.
• window.scrollTo(): Scrolls to a specific position on the page.

By the way, webdev-guide has uploaded a detailed tutorial about console.log.

Example:

console.log(window.innerWidth); // Returns the width of the viewport in pixels
window.location.href = 'https://www.example.com'; // Navigates to a new URL

2. The document object

document is a child object of window and represents the Document Object Model (DOM) ​​of the loaded web page. It is the interface through which you can access and manipulate the structure of the HTML documents.

Properties and methods of document:

• Accessing elements:
• document.getElementById(): Finds an element by its ID.
• document.querySelector(): Finds the first element that matches a CSS selector.

• document.querySelectorAll(): Finds all elements that match a CSS selector.

• Manipulating elements:
• document.createElement(): Creates a new HTML element.
• document.appendChild(): Adds an element as a child of another element.

• element.innerHTML: Modifies the HTML content of an element.

• DOM events:
• document.addEventListener(): Adds event listeners such as click, keydown or DOMContentLoaded.

document.addEventListener('click', function() {
console.log('Page was clicked!');
});
``

- **Document information**:
- `document.title`: Returns or changes the page title.
- `document.cookie`: Accesses the website's cookies.

#### Example:
```javascript
const heading = document.getElementById('title'); // Selects an element with ID "title"
heading.innerHTML = 'New title'; // Changes the text content of the selected element

Differences between window and document:

• window represents the entire browser window, including the global context and everything associated with it (e.g. cookies, URL, navigation history).
• document refers specifically to the contents and structure of the current web page loaded in the browser. It allows manipulation and reading of HTML elements and attributes.

Summary of differences:

Example: Cooperation between window and document

window.addEventListener('resize', function() {
  console.log('Window size changed:', window.innerWidth);
});

document.addEventListener('DOMContentLoaded', function() {
  console.log('The DOM has been fully loaded and parsed');
});

This example uses the window object to respond to the window size and the document object to ensure that the DOM content is fully loaded.

With this information, you have an overview of the important differences and relationships between window and document. Both are indispensable tools in web development to control the behavior of the browser and the web page.