Introduction to Document and Window Object
The Document Object Model (DOM) and Window Object are two fundamental objects in JavaScript that allow you to interact with and manipulate web pages.
The Document Object represents the entire HTML document as a tree-like structure, where each element in the document is a node in the tree. You can use the Document Object to manipulate the contents of the document, such as adding or removing elements, modifying text or attributes, and more.
Here are a few examples of things you can do with the Document Object:Access and modify elements on the page using selectors like getElementById or querySelector.
Create new elements and add them to the page using createElement and appendChild.
Modify the content of an element using innerHTML or textContent.
Change the attributes of an element using setAttribute or removeAttribute.
Add event listeners to elements using addEventListener.
The Window Object, on the other hand, represents the browser window or tab that is displaying the web page. It provides access to various browser features, such as the location of the window, the history of pages visited, and more. You can also use the Window Object to interact with the Document Object, such as accessing elements or modifying the URL of the page.
Here are a few examples of things you can do with the Window Object:Get information about the size and position of the window using innerWidth, innerHeight, outerWidth, and outerHeight.
Open new windows or tabs using window.open.
Manipulate the URL of the current page using location.href or location.replace.
Schedule code to run at a later time using setTimeout or setInterval.
Access the console or alert the user using console.log or alert.
Both the Document and Window Objects provide a powerful set of tools for interacting with web pages and creating dynamic, interactive experiences for users. By learning how to use these objects, you can create more engaging and responsive web applications.
<!DOCTYPE html>
<html>
<head>
<title>Example Program</title>
</head>
<body>
<h1>My Example Program</h1>
<p>Click the button to add a new paragraph element.</p>
<button id="myButton">Add Paragraph</button>
<script>
// Get a reference to the button element
let button = document.getElementById("myButton"); // Add a click event listener to the button
button.addEventListener("click", function() { // Create a new paragraph element
let newParagraph = document.createElement("p"); // Set the text content of the paragraph
newParagraph.textContent = "This is a new paragraph."; // Append the paragraph to the body of the document
document.body.appendChild(newParagraph);
} );
</script>
</body>
</html>
Tags:
JS