Window & Document Object

In JavaScript, the window object represents the browser window that contains the document. The document object represents the HTML document loaded in the window. Understanding these objects is crucial for web developers as they provide access to various functionalities and elements of the browser and the loaded document.

Window Object

The window object is the global object in client-side JavaScript and represents the browser window. It contains properties and methods that allow interaction with the browser window, such as navigating to a URL, opening new windows, and setting timeouts.

Common Properties and Methods of the Window Object:

window.document: Returns a reference to the Document object representing the HTML document loaded in the window.
window.location: Provides information about the current URL and allows navigation to other URLs.
window.alert(): Displays a modal dialog box with a message and an OK button.
window.open(): Opens a new browser window or a new tab, depending on the browser settings.
window.close(): Closes the current window.

Example:

// Accessing the document object
let doc = window.document;

// Accessing location information
console.log(window.location.href);

// Opening a new window
window.open('https://example.com', '_blank');

// Displaying an alert
window.alert('Hello, World!');

Document Object

The document object represents the HTML document loaded in the window. It provides properties and methods to interact with the document's content, such as accessing elements, modifying content, and handling events.

Common Properties and Methods of the Document Object:

document.getElementById(id): Returns a reference to the element with the specified ID.
document.querySelector(selector): Returns the first element that matches the specified CSS selector.
document.createElement(tagName): Creates a new HTML element with the specified tag name.
document.getElementById(id).innerHTML: Gets or sets the HTML content of an element.
document.addEventListener(event, handler): Registers an event handler function for the specified event.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Object Example</title>
</head>
<body>
    <div id="content"></div>

    <script>
        // Creating a new element
        let paragraph = document.createElement('p');
        paragraph.textContent = 'This is a dynamically created paragraph.';

        // Appending the element to the document
        document.getElementById('content').appendChild(paragraph);

        // Adding an event listener
        document.addEventListener('click', function() {
            console.log('Document clicked.');
        });
    </script>
</body>
</html>

In this example, we create a new paragraph element dynamically and append it to the document. We also add a click event listener to the document, which logs a message to the console when the document is clicked.

Understanding the window and document objects is essential for building dynamic and interactive web applications using JavaScript. These objects provide powerful capabilities for manipulating the browser window and the content of the loaded HTML document.

PreviousData Types in JavaScript NextArrays

Last updated 9 months ago

// Accessing the document object let doc = window.document; // Accessing location information console.log(window.location.href); // Opening a new window window.open('https://example.com', '_blank'); // Displaying an alert window.alert('Hello, World!');

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document Object Example</title> </head> <body> <div id="content"></div> <script> // Creating a new element let paragraph = document.createElement('p'); paragraph.textContent = 'This is a dynamically created paragraph.'; // Appending the element to the document document.getElementById('content').appendChild(paragraph); // Adding an event listener document.addEventListener('click', function() { console.log('Document clicked.'); }); </script> </body> </html>