Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How are the JavaScript window and JavaScript document different from one another?
In JavaScript, the window object represents the current web browser window, while the document object represents the web page that is currently loaded in the window.
The window object in JavaScript provides access to the browser's history, location, and other properties and methods that allow us to interact with the browser window itself. It contains information about the browser window, like the size, the document the window contains, and the window’s history.
The document object represents the structure of the web page as a whole and provides access to the content of the page, as well as methods for manipulating that content. It contains information about the content of the page, like the URL, the title, the content, and the links.
For example, we can use the document.getElementById() method to get a reference to an element on the page by its ID, or the document.createElement() method to create a new element. We can also use the window object to manipulate the browser window, such as with the window.open() method to open a new window, or the window.scrollTo() method to scroll to a specific position on the page.
JavaScript Window
In JavaScript, the window object represents the current web browser window. It provides access to the browser's history, location, and other properties and methods that allow you to interact with the browser window.
A window object is a global object in JavaScript, which is available in all contexts throughout your code. You can access it directly using the window keyword.
Here are some examples of common tasks that involve the window object −
Getting the current URL of the page: var currentUrl = window.location.href;
Getting the width of the browser window: var windowWidth = window.innerWidth;
Getting the height of the browser window: var windowHeight = window.innerHeight;
Opening a new window: window.open('http://www.example.com', '_blank');
Closing the current window: window.close();
Syntax
The syntax for the javascript window is as follows −
window.propertyName
Example
In this example, we are getting three things: the innerHeight, innerWidth and the currentUrl of the window.
</head>
<body>
<h2>JavaScript Window</h2>
<p id="innerHeight"></p>
<p id="innerWidth"></p>
<p id="currentUrl"></p>
<script>
const height = document.getElementById('innerHeight');
const width = document.getElementById('innerWidth');
const url = document.getElementById('currentUrl');
height.textContent = "innerHeight - " +
window.innerHeight;
width.textContent = "innerWidth - " +
window.innerWidth;
url.textContent = "currentUrl - " + window.location.href;
</script>
</body>
</html>
JavaScript Document
In JavaScript, the document object represents the web page currently loaded in the web browser. It provides access to the content of the page, as well as methods for manipulating that content.
The document object is a property of the window object and is also a global object in JavaScript, which means that it is available in all contexts throughout your code. You can access it directly using the document keyword.
Below are some examples of common tasks that involve the document object −
Getting the title of the document: var docTitle = document.title;
Getting the last modified date of the document: var modified = document.lastModified;
Getting the body element of the document: var bodyEl = document.body;
Getting an element by its ID: var el = document.getElementById('my-element');
Creating a new element: var newEl = document.createElement('div');
Syntax
The syntax for a javascript document is as follows −
document.propertyName
Example
In this example, we are getting three things −
<html>
<head>
<title>Example- JavaScript Document</title>
</head>
<body>
<h2> JavaScript Document </h2>
<p id="title"></p>
<p id="currentUrl"></p>
<script>
const p = document.getElementById('title');
const url = document.getElementById('currentUrl');
p.textContent = "Doc Title - " + document.title;
url.textContent = "Doc CurrentUrl - " + document.location.href;
</script>
</body>
</html>
Difference Between JavaScript Window and Document
The following table highlights how the javascript window is different from the javascript document −
| JavaScript’s window | JavaScript’s document |
|---|---|
| It represents the current web browser window. | It represents the web page that is currently loaded in the window. |
| Its properties include location, history, innerWidth, innerHeight, etc. | Its properties include title, lastModified, body, head, etc. |
| JavaScript windows methods are: open(), close(), scrollTo(), alert(), etc. | JavaScript windows methods are: getElementById(), createElement(), querySelector(), querySelectorAll(), etc. |
| It is available globally. | It is available globally. |
| It is an object of a window. | It is an object of the browser. |
Conclusion
In conclusion, the JavaScript window and document are two of the most important objects in JavaScript, and both have different purposes. The window represents the current web browser window, whereas the document object represents the web page that is currently loaded in the window.
While both objects are global and can be accessed from anywhere in our code, it is important to understand the differences between them to use them effectively while developing web projects.
165 Views
