The window object and the document object are both part of the Document Object Model (DOM) in JavaScript, but they have different scopes and purposes.
The window object represents the entire browser window, including the document, frames, and other components such as the URL bar, bookmarks, and history. It provides access to various properties and methods that are related to the entire browser window, such as the size of the window, the focus on a particular element, and the history of browsing sessions.
console.log(window); // Output: { history: [Object], location: [Object], document: [Object], ... }
The document object represents the HTML document that is currently loaded in the browser window, and it provides access to various elements, attributes, and styles within the document. It allows you to manipulate the DOM tree using JavaScript, such as changing the text of an element or adding a new element to the page.
console.log(document); // Output: <!DOCTYPE html><html><head><title>Document</title></head><body><h1>Hello, world!</h1></body></html>
In summary, the window object represents the entire browser window, while the document object represents the HTML document that is currently loaded in the browser window. You can access both objects using JavaScript to manipulate and interact with various components of a web page.