Tutorials


JavaScript BOM window.document object


The window.document object in JavaScript's Browser Object Model (BOM) represents the entire HTML document loaded in the browser window. It provides a structured way to interact with the contents of a web page, including elements, attributes, and styles. The document object is part of the Document Object Model (DOM), which is a programming interface for web documents.

Key Features of window.document

  1. Accessing the Document:

    • The document object can be accessed through the window object, but you can also reference it directly as document.
    • console.log(document); // Logs the document object

  2. Document Properties: The document object has several important properties that allow you to access various aspects of the web page:

    • document.title: Gets or sets the title of the document (the text shown in the browser's title bar or tab).

      console.log(document.title); // "My Web Page"
document.title = "New Title"; // Changes the title to "New Title"

    • document.body: Returns the <body> element of the document, allowing you to manipulate the content within it.

      console.log(document.body); // Logs the body element
document.body.style.backgroundColor = "lightblue"; // Changes the background color

    • document.documentElement: Returns the root element of the document, typically the <html> element.

      console.log(document.documentElement); // Logs the <html> element

    • document.head: Returns the <head> element of the document, where meta-information and links to stylesheets or scripts are defined.

      console.log(document.head); // Logs the <head> element

    • document.URL: Returns the full URL of the document.

      console.log(document.URL); // "https://example.com"

  3. Document Methods: The document object provides various methods to interact with the elements of the document:

    • document.getElementById(id): Returns the element with the specified id.

      const element = document.getElementById("myElement");

    • document.getElementsByClassName(className): Returns a live HTMLCollection of elements with the specified class name.

      const elements = document.getElementsByClassName("myClass");

    • document.getElementsByTagName(tagName): Returns a live HTMLCollection of elements with the specified tag name.

      const divs = document.getElementsByTagName("div");

    • document.querySelector(selector): Returns the first element that matches the specified CSS selector.

      const firstDiv = document.querySelector("div");

    • document.querySelectorAll(selector): Returns a NodeList of all elements that match the specified CSS selector.

      const allDivs = document.querySelectorAll("div");

    • document.createElement(tagName): Creates a new element of the specified type.

      const newDiv = document.createElement("div");

    • document.appendChild(childNode): Adds a new child node to the document.

      document.body.appendChild(newDiv); // Appends the new <div> to the body

    • document.write(content): Writes content to the document stream (not recommended for modern use).

      document.write("<h1>Hello World</h1>");

  4. Event Handling: The document object can be used to listen for events occurring in the document, such as user interactions:

    • Adding Event Listeners:
      document.addEventListener("DOMContentLoaded", function() {
    console.log("The document has been fully loaded and parsed.");
});

Example Usage

Here’s a simple example that demonstrates how to use window.document to manipulate the content of a web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Example</title>
</head>
<body>
    <h1 id="mainTitle">Hello World</h1>
    <button id="changeTitleButton">Change Title</button>

    <script>
        // Change the document title when the button is clicked
        document.getElementById('changeTitleButton').addEventListener('click', function() {
            document.title = "New Title"; // Change the title of the document
            document.getElementById('mainTitle').textContent = "Title Changed!"; // Change the main heading
        });
    </script>
</body>
</html>

Summary

The window.document object is a fundamental component of the JavaScript BOM that allows you to interact with the web page's content dynamically. Understanding how to manipulate the document object is essential for creating interactive and dynamic web applications. Through its properties and methods, you can access, modify, and manage the elements and structure of an HTML document, enabling a rich user experience.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about