In JavaScript, the ‘console’ object is a property of the window object. It allows the developers to access the debugging console of the browser.
The console object contains the various methods used for different functionalities. In Node.js, the console object is used to interact with the terminal.
We access the console object using the window object or without using the window object – window.console or just console.
Console Object Methods
There are many methods available on the console object. These methods are used to perform a number of task such testing, debugging and logging.
You may access the ‘console’ object methods using the following syntax −
You can observe outputs in the console. To open the console, use the Ctrl + shift + I or Cmd + shift + I key.
Below, we will cover some methods of the console object with examples.
JavaScript console.log() Method
You can use the console.log() method to print the message in the debugging console. It takes the expression or text message as an argument.
Syntax
Follow the syntax below to use the console.log() method.
console.log(expression);
In the above syntax, the expression can be a variable, mathematical expression, string, etc., which you need to print in the console.
Example
In the below code, clicking the button will invoke the ‘printMessage’ function. The function prints the string text and number value in the console.
<html><body><h2> JavaScript console.log() Method </h2><button onclick ="printMessage()"> Print Message in Console </button><p> Please open the console before you click "Print Message in Console" button</p><script>functionprintMessage(){
console.log("You have printed message in console!");let num =10;
console.log(num);}</script></body></html>
JavaScript console.error() Method
The console.error() method prints the error message in the console, highlighting the error with a red background.
Syntax
Follow the syntax below to use the console.error() method.
console.error(message);
The console.error() message takes a message as an argument.
Example
In the below code, printError() function logs the error in the console when you click the button. You can observe the error highlighted with the red background.
<html><body><h2> JavaScript console.error() Method </h2><button onclick="printError()"> Print Error Message in Console </button><p> Please open the console before you click " Print Error Message in Console" button.</p><script>functionprintError(){
console.error("Error occured in the code!");}</script></body></html>
JavaScript console.clear() Method
The console.clear() method clears the console.
Syntax
Follow the syntax below to use the console.clear() method.
console.clear()
Example
In the below code, we print messages to the console. After that, when you click the button, it executes the clearConsole() function and clears the console using the console.clear() method.
<html><body><h2> JavaScript console.clear() Method </h2><button onclick ="clearConsole()"> Clear Console </button><p> Please open the console before you click "Clear Console" button</p><script>
console.log("Hello world!");
console.log("Click the button to clear the console.");functionclearConsole(){
console.clear();}</script></body></html>
The console object methods list
Here, we have listed all methods of the console object.
Method
Method Description
assert()
It prints the error message in the console if the assertion passed as a parameter is false.
clear()
It clears the console.
count()
It is used to count how many times the count() method is invoked at a specific location.
error()
It displays the error message in the console.
group()
It is used to create a group of messages in the console.
groupCollapsed()
It is used to create a new collapsed group of messages in the console.
groupEnd()
It is used to end the group.
info()
It shows the informational or important message in the console.
log()
It prints the message into the output.
table()
It shows the data in the tabular format in the console.
The location object in JavaScript provides information about the browser’s location, i.e., URLs. It is a built-in property of both the window and document objects. We can access it using either window.location or document.location.
The ‘location’ object contains various properties and methods to get and manipulate the information of the browser’s location (URL).
JavaScript Location Object Properties
We can use the properties of the location object to get information of URL:
hash − This property is used to set or get the anchor part of the URL.
host − This property is used to set or get the hostname or port number of the URL.
hostname − This property is used to set the hostname.
href − This property is used to set or get the URL of the current window.
origin − This property returns the protocol, domain, and port of the URL.
pathname − This property updates or gets the path name.
port − This property updates or gets the port of the URL.
protocol − This property updates or gets the protocol.
search − This property is used to set or get the query string of the URL.
Syntax
Follow the syntax below to access the location object’s properties and methods −
window.location.property;
OR
location.property;
You may use the ‘window’ object to access the ‘location’ object.
Here, we have demonstrated the use of some properties of the location object with examples.
Example: Accessing location host property
The location.host property returns the host from the current URL. However, you can also change the host using it.
In the below code, we extract the host from the URL. You can see that it returns ‘www.tutorialspoint.com’.
<html><body><div id="output"></div><script>const host = location.host;
document.getElementById("output").innerHTML ="The host of the current location is: "+ host;</script></body></html>
Output
The host of the current location is: www.tutorialspoint.com
Example: Accessing location protocol property
The location.protocol propery is used to get used in the current URL. You can also use it to update the protocol.
Try the following example to use the location.protocol property –
<html><body><div id ="output"></div><script>
document.getElementById("output").innerHTML ="The protocol of the current location is: "+ location.protocol;</script></body></html>
Output
The protocol of the current location is: https:
Example: Accessing location hostname property
The location.hostname property returns the host name of the current URL. You can use it to the hostname as well.
Try the following example to use location.hostname property
<html><body><div id ="output"></div><script>
document.getElementById("output").innerHTML ="The host name of the current location is: "+ location.hostname;</script></body></html>
Output
The host name of the current location is: www.tutorialspoint.com
Example: Accessing location pathname property
The location.pathname property returns the path name of the current location. You can set the path name using it.
<html><body><div id ="output"></div><script>
document.getElementById("output").innerHTML ="The protocol of the current location is: "+ location.pathname;</script></body></html>
Output
The protocol of the current location is: /javascript/javascript_location_object.htm
JavaScript Location Object Methods
We can also use the methods of the location object to navigation to new URLs −
assign(url) − This method loads a new document at the specified URL.
replace(url) − This method replaces the current document with a new document at the specified URL.
reload() − This method reloads the current document.
JavaScript location assign() method
The location.assign() method takes the URL and changes the URL in the current window. In short, it opens a new web page.
Syntax
Follow the syntax below to use the location.assign() method in JavaScript −
location.assign();
Example
In the below code, when you click the ‘Go to home page’ button, it will redirect you to the home page of the tutorialpoint website.
<html><body><div id="output"></div><button onclick="changePage()">Go to Home Page</button><script>let output = document.getElementById("output");functionchangePage(){
window.location.assign("https://www.tutorialspoint.com/");}</script></body></html>
Location Object Properties List
Here, we have listed all properties of the Location object.
Property
Description
hash
It is used to set or get the anchor part of the URL.
host
It is used to set or get the hostname or port number of the URL.
hostname
It is used to set the hostname.
href
It is used to set or get the URL of the current window.
origin
It returns the protocol, domain, and port of the URL.
pathname
To update or get the path name.
port
To update or get the port of the URL.
protocol
To update or get the protocol.
search
To set or get the query string of the URL.
Location Object Methods List
Here, we have listed all methods of the Location object.
Method
Description
assign()
To load resources at a particular URL.
reload()
To reload the web page.
replace()
To replace the resources of the current webpage with another webpage’s resources.
The navigator object in JavaScript is used to access the information of the user’s browser. Using the ‘navigator’ object, you can get the browser version and name and check whether the cookie is enabled in the browser.
The ‘navigator’ object is a property of the window object. The navigator object can be accessed using the read-only window.navigator property.
Navigator Object Properties
There are many properties of navigator object that can be used to access the information about the user’s browser.
Syntax
Follow the syntax below to use to access a property of navigator object in JavaScript.
window.navigator.proeprty;OR
navigator.property;
You may use the ‘window’ object to access the ‘navigator’ object.
Here, we have listed all properties of the Navigator object.
Property
Description
appName
It gives you a browser name.
appVersion
It gives you the browser version.
appCodeName
It gives you the browser code name.
cookieEnabled
It returns a boolean value based on whether the cookie is enabled.
language
It returns the browser language. It is supported by Firefox and Netscape only.
plugins
It returns the browser plugins. It is supported by Firefox and Netscape only.
mimeTypes[]
It gives you an array of Mime types. It is supported by Firefox and Netscape only.
platform
It gives you a platform or operating system in which the browser is used.
online
Returns a boolean value based on whether the browser is online.
product
It gives you a browser engine.
userAgent
It gives you a user-agent header of the browser.
Example: Accessing Navigator Object Properties
We used the different properties in the below code to get the browser information.
The appName property returns the browser’s name, appCodeName returns the code name of the browser, appVersion returns the browser’s version, and the cookieEnabled property checks whether the cookies are enabled in the browser.
<html><body><p> Browser Information</p><p id ="demo"></p><script>
document.getElementById("demo").innerHTML ="App Name: "+ navigator.appName +"<br>"+"App Code Name: "+ navigator.appCodeName +"<br>"+"App Version: "+ navigator.appVersion +"<br>"+"Cookie Enabled: "+ navigator.cookieEnabled +"<br>"+"Language: "+ navigator.language +"<br>"+"Plugins: "+ navigator.plugins +"<br>"+"mimeTypes[]: "+ navigator.mimeTypes +"<br>"+"platform: "+ navigator.platform +"<br>"+"online: "+ navigator.online +"<br>"+"product: "+ navigator.product +"<br>"+"userAgent: "+ navigator.userAgent;</script><p>Please note you may get different result depending on your browser.</p></body></html>
Output
Browser Information
App Name: Netscape
App Code Name: Mozilla
App Version: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Cookie Enabled: true
Language: en-US
Plugins: [object PluginArray]
mimeTypes[]: [object MimeTypeArray]
platform: Win32
online: undefined
product: Gecko
userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Please note you may get different result depending on your browser.
Example
In the example below, we accessed the navigator object as a property of the window object. Then we accessed different properties of this navigator object.
<html><body><p> Browser Information</p><p id ="demo"></p><script>
document.getElementById("demo").innerHTML ="App Name: "+ window.navigator.appName +"<br>"+"App Code Name: "+ window.navigator.appCodeName +"<br>"+"App Version: "+ window.navigator.appVersion +"<br>"+"Cookie Enabled: "+ window.navigator.cookieEnabled +"<br>"+"Language: "+ window.navigator.language +"<br>"+"Plugins: "+ window.navigator.plugins +"<br>"+"mimeTypes[]: "+ window.navigator.mimeTypes +"<br>"+"platform: "+ window.navigator.platform +"<br>"+"online: "+ window.navigator.online +"<br>"+"product: "+ window.navigator.product +"<br>"+"userAgent: "+ window.navigator.userAgent;</script><p>Please note you may get different result depending on your browser.</p></body></html>
Output
Browser Information
App Name: Netscape
App Code Name: Mozilla
App Version: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Cookie Enabled: true
Language: en-US
Plugins: [object PluginArray]
mimeTypes[]: [object MimeTypeArray]
platform: Win32
online: undefined
product: Gecko
userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
Please note you may get different result depending on your browser.
JavaScript Navigator Object Methods
The Navigator object contains only one method.
Method
Description
javaEnabled()
It checks whether the Java is enabled in the web browser.
Example: Navigator javaEnabled() Method
In the below code, we used the javaEnabled() method of the navigator object to check whether the java is enabled in the browser.
<html><body><p id ="output"></p><script>const output = document.getElementById("output");if(navigator.javaEnabled()){
output.innerHTML +="Java is enabled in the browser!";}else{
output.innerHTML +="Please, enable the Java!";}</script><p>Please note you may get different result depending on your browser.</p></body></html>
Output
Please, enable the Java!
Please note you may get different result depending on your browser.
In JavaScript, the window ‘history’ object contains information about the browser’s session history. It contains the array of visited URLs in the current session.
The ‘history’ object is a property of the ‘window’ object. The history property can be accessed with or without referencing its owner object, i.e., window object.
Using the ‘history’ object’s method, you can go to the browser’s session’s previous, following, or particular URL.
History Object Methods
The window history object provides useful methods that allow us to navigate back and forth in the history list.
Follow the syntax below to use the ‘history’ object in JavaScript.
You may use the ‘window’ object to access the ‘history’ object.
JavaScript History back() Method
The JavaScript back() method of the history object loads the previous URL in the history list.
Syntax
Follow the syntax below to use the history back() method.
history.back();
Example
In the below code’s output, you can click the ‘go back’ button to go to the previous URL. It works as a back button of the browser.
<html><body><p> Click "Go Back" button to load previous URL</p><button onclick="goback()"> Go Back </button><p id ="output"></p><script>functiongoback(){
history.back();
document.getElementById("output").innerHTML +="You will have gone to previous URL if it exists";}</script></body></html>
JavaScript History forward() Method
The forward() method of the history object takes you to the next URL.
Syntax
Follow the syntax below to use the forward() method.
history.forward();
Example
In the below code, click the button to go to the next URL. It works as the forward button of the browser.
<html><body><p> Click "Go Forward" button to load next URL</p><button onclick ="goforward()"> Go Forward </button><p id ="output"></p><script>functiongoforward(){
history.forward();
document.getElementById("output").innerHTML ="You will have forwarded to next URL if it exists."}</script></body></html>
JavaScript History go() Method
The go() method of the history object takes you to the specific URL of the browser’s session.
Syntax
Follow the syntax below to use the go() method.
history.go(count);
In the above syntax, ‘count’ is a numeric value representing which page you want to visit.
Example
In the below code, we use the go() method to move to the 2nd previous page from the current web page.
<html><body><p> Click the below button to load 2nd previous URL</p><button onclick ="moveTo()"> Move at 2nd previous URL</button><p id ="output"></p><script>functionmoveTo(){
history.go(-2);
document.getElementById("output").innerHTML ="You will have forwarded to 2nd previous URL if it exists.";}</script></body></html>
Example
In the below code, we use the go() method to move to the 2nd previous page from the current web page.
<html><body><p> Click the below button to load 2nd next URL</p><button onclick ="moveTo()"> Move at 2nd next URL</button><p id ="output"></p><script>functionmoveTo(){
history.go(2);
document.getElementById("output").innerHTML ="You will have forwarded to 2nd next URL if it exists.";}</script></body></html>
Following is the complete window history object reference including both properties and methods −
History Object Property List
The history object contains only the ‘length’ property.
Property
Description
length
It returns the object’s length, representing the number of URLS present in the object.
The screen object in JavaScript is a property of the ‘window’ object. The ‘screen’ object’s properties contain information about the device’s screen. The screen object can be accessed by using the window.screen syntax. We can also access it without using the window object.
Screen Object Properties
The screen object has a number of properties that provide information about the screen’s orientation, resolution, and more. These properties can be used to develop applications that are responsive to different screen sizes and orientations.
Following are some properties of the JavaScript screen object −
width − The width of the screen in pixels.
height − The height of the screen in pixels.
availWidth − The width of the screen, minus the width of the window taskbar.
availHeight − The height of the screen, minus the height of the window taskbar.
colorDepth − The number of bits per pixel that the screen can display.
pixelDepth − The number of bits per pixel that the screen is actually using.
Screen Object Property Syntax
Follow the syntax below to use the property of the screen object in JavaScript −
window.screen.property;OR
screen.property;
You may or may not use the ‘window’ object to access the screen object.
Example
In the example below, we access the various properties of the screen object with referencing the screen as the property of window object.
In the below code, we access the various properties of the screen object and observe their value. In this example we are not referencing the window object to access the screen object.
Please note that we get the same information about the screen in the above two examples.
Screen Object Properties List
Below, we have covered all properties of the ‘screen’ object with a description. You need to use the ‘screen’ as a reference to access these properties.
Property
Description
availHeight
It gives the height of the screen without including the taskbar.
availWidth
It gives the width of the screen without including the taskbar.
colorDepth
It gives the depth of the color palette to display images.
height
It returns the total height of the screen.
pixelDepth
It is used to get the color resolution of the screen.
The document object is a JavaScript object that provides the access to all elements of an HTML document. When the HTML document is loaded in the web browser, it creates a document object. It is the root of the HTML document.
The document object contains the various properties and methods you can use to get details about HTML elements and customize them.
The JavaScript document object is a property of the window object. It can be accessed using window.document syntax. It can also be accessed without prefixing window object.
JavaScript Document Object Properties
The JavaScript Document Object represents the entire HTML document, and it comes with several properties that allow us to interact with and manipulate the document. Some common Document object properties are as follows
document.title − Gets or sets the title of the document.
document.URL − Returns the URL of the document.
document.body − Returns the <body> element of the document.
document.head − Returns the <head> element of the document.
document.documentElement − Returns the <html> element of the document.
document.doctype − Returns the Document Type Declaration (DTD) of the document.
These properties provide a way to access and modify different parts of the HTML document using JavaScript.
Example: Accessing the document title
In the example below, we use the document.title property to access the property odd the document.
<html><head><title> JavaScript -DOM Object </title></head><body><div id ="output">The title of the document is:</div><script>
document.getElementById("output").innerHTML += document.title;</script></body></html>
Output
The title of the document is: JavaScript - DOM Object
Example: Accessing the document URL
In the example below, we have used the document.URL property to access the current URL of the page.
<html><head><title> JavaScript -DOM Object </title></head><body><div id ="output">The URLof the document is:</div><script>
document.getElementById("output").innerHTML += document.URL;</script></body></html>
Output
The URL of the document is: https://www.tutorialspoint.com/javascript/javascript_document_object.htm
JavaScript Document Object Methods
The JavaScript Document Object provides us with various methods that allow us to interact with and manipulate the HTML document. Some common Document object methods are as follows
getElementById(id) − Returns the element with the specified ID.
getElementsByClassName(className) − Returns a collection of elements with the specified class name.
getElementsByTagName(tagName) − Returns a collection of elements with the specified tag name.
createElement(tagName) − Creates a new HTML element with the specified tag name.
createTextNode(text) − Creates a new text node with the specified text.
appendChild(node) − Appends a node as the last child of a node.
removeChild(node) − Removes a child node from the DOM.
setAttribute(name, value) − Sets the value of an attribute on the specified element.
getAttribute(name) − Returns the value of the specified attribute on the element.
These methods enable us to dynamically manipulate the structure and content of the HTML document using JavaScript.
Example: Accessing HTML element using its id
In the example below, we use document.getElementById() method to access the DIV element with id “output” and then use the innerHTML property of the HTML element to display a message.
<html><body><div id ="result"></div><script>// accessing the DIV element.
document.getElementById("result").innerHTML +="Hello User! You have accessed the DIV element using its id.";</script></body></html>
Output
Hello User! You have accessed the DIV element using its id.
Example: Adding an event to the document
In the example below, we use document.addEventListener() method to add a mouseover event to the document.
<html><body><div id ="result"><h2> Mouseover Event </h2><p> Hover over here to change background color </p></div><script>
document.addEventListener('mouseover',function(){
document.getElementById("result").innerHTML ="Mouseover event occurred.";});</script></body></html>
Document Object Properties List
Here, we have listed all properties of the document object.
Property
Description
document.activeElement
To get the currently focused element in the HTML document.
adoptedStyleSheets
It sets the array of the newly constructed stylesheets to the document.
baseURI
To get the absolute base URI of the document.
body
To set or get the documents <body> tag.
characterSet
To get the character encoding for the document.
childElementCount
To get a count of the number of child elements of the document.
children
To get all children of the document.
compatMode
To get a boolean value representing whether the document is rendered in the standard modes.
contentType
It returns the MIME type of the document.
cookie
To get the cookies related to the document.
currentScript
It returns the script of the document whose code is currently executing.
defaultView
To get the window object associated with the document.
designMode
To change the editability of the document.
dir
To get the direction of the text of the document.
doctype
To get the document type declaration.
documentElement
To get the <html> element.
documentURI
To set or get the location of the document.
embeds
To get all embedded (<embed>) elements of the document.
firstElementChild
To get the first child element of the document.
forms
It returns an array of <form> elements of the document.
fullScreenElement
To get the element that is being presented in the full screen.
fullScreenEnabled
It returns the boolean value, indicating whether the full screen is enabled in the document.
head
It returns the <head> tag of the document.
hidden
It returns a boolean value, representing whether the document is considered hidden.
images
It returns the collection of the <img> elements.
lastElementChild
It returns the last child element of the document.
lastModified
To get the last modified date and time of the document.
links
To get the collection of all <a> and <area> elements.
location
To get the location of the document.
readyState
To get the current state of the document.
referrer
To get the URL of the document, which has opened the current document.
scripts
To get the collection of all <script> elements in the document.
scrollingElement
To get the reference to the element which scrolls the document.
styleSheets
It returns the style sheet list of the CSSStyleSheet object.
timeLine
It represents the default timeline of the document.
title
To set or get the title of the document.
URL
To get the full URL of the HTML document.
visibilityState
It returns the boolean value, representing the visibility status of the document.
Document Object Methods List
The following is a list of all JavaScript document object methods −
Method
Description
addEventListener()
It is used to add an event listener to the document.
adoptNode()
It is used to adopt the node from the other documents.
append()
It appends the new node or HTML after the last child node of the document.
caretPositionFromPoint()
It returns the caretPosition object, containing the DOM node based on the coordinates passed as an argument.
close()
It closes the output stream opened using the document.open() method.
createAttribute()
It creates a new attribute node.
createAttributeNS()
It creates a new attribute node with the particular namespace URI.
createComment()
It creates a new comment node with a specific text message.
createDocumentFragment()
It creates a DocumentFragment node.
createElement()
It creates a new element node to insert into the web page.
createElementNS()
It is used to create a new element node with a particular namespace URI.
createEvent()
It creates a new event node.
createTextNode()
It creates a new text node.
elementFromPoint()
It accesses the element from the specified coordinates.
elementsFromPoint()
It returns the array of elements that are at the specified coordinates.
getAnimations()
It returns the array of all animations applied on the document.
getElementById()
It accesses the HTML element using the id.
getElementsByClassName()
It accesses the HTML element using the class name.
getElementsByName()
It accesses the HTML element using the name.
getElementsByTagName()
It accesses the HTML element using the tag name.
hasFocus()
It returns the boolean value based on whether any element or document itself is in the focus.
importNode()
It is used to import the node from another document.
normalize()
It removes the text nodes, which are empty, and joins other nodes.
open()
It is used to open a new output stream.
prepand()
It is used to insert the particular node before all nodes.
querySelector()
It is used to select the first element that matches the css selector passed as an argument.
querySelectorAll()
It returns the nodelist of the HTML elements, which matches the multiple CSS selectors.
removeEventListener()
It is used to remove the event listener from the document.
replaceChildren()
It replaces the children nodes of the document.
write()
It is used to write text, HTML, etc., into the document.
writeln()
It is similar to the write() method but writes each statement in the new line.
The JavaScript window object represents the browser’s window. In JavaScript, a ‘window’ object is a global object. It contains the various methods and properties that we can use to access and manipulate the current browser window. For example, showing an alert, opening a new window, closing the current window, etc.
All the JavaScript global variables are properties of window object. All global functions are methods of the window object. Furthermore, when the browser renders the content in the ‘iframe, it creates a separate ‘window’ object for the browser and each iframe.
Here, you will learn to use the ‘window’ object as a global object and use the properties and methods of the window object.
Window Object as a Global Object
As ‘window’ is a global object in the web browser, you can access the global variables, functions, objects, etc., using the window object anywhere in the code.
Let’s understand it via the example below.
Example
In the below code, we have defined the ‘num’ global and local variables inside the function. Also, we have defined the ‘car’ global object.
In the test() function, we access the global num variable’s value using the ‘window’ object.
<html><body><div id ="output1">The value of the global num variable is:</div><div id ="output2">The value of the local num variable is:</div><div id ="output3">The value of the car object is:</div><script>var num =100;const car ={
brand:"Honda",
model:"city",}functiontest(){let num =300;
document.getElementById("output1").innerHTML += window.num;
document.getElementById("output2").innerHTML += num;
document.getElementById("output3").innerHTML += car.brand;}test();</script></body></html>
Output
The value of the global num variable is: 100
The value of the local num variable is: 300
The value of the car object is: Honda
You may also use the ‘window’ object to make a particular variable global from a particular block.
Window Object Properties
The ‘window’ object contains the various properties, returning the status and information about the current window.
Below, we have covered all properties of the ‘window’ object with a description. You may use the ‘window’ as a reference to access these properties.
Property Name
Property Description
closed
When the particular window is closed, it returns true.
console
It returns the window’s console object.
customElements
It is used to define and access the custom elements in the browser window.
devicePixelRatio
It returns the physical pixel ratio of the device divided by CSS pixel ratio.
document
It is used to access the HTML document opened in the current window.
frames
It is used to get the window items like iframes, which are opened in the current window.
frameElement
It returns the current frame of the window.
history
It is used to get the history object of the window.
innerHeight
It returns the inner height of the window without including the scroll bar, toolbar, etc.
innerWidth
It returns the inner width of the window without including the scroll bar, toolbar, etc.
length
It returns the total number of iframes in the current window.
localStorage
It is used to access the local storage of the current window.
location
It is used to access the location object of the current window.
name
It is used to get or set the name of the window.
navigator
It is used to get the Navigator object of the browser.
opener
It returns a reference to the window from where the current window is opened.
outerHeight
It returns the total height of the window.
outerWidth
It returns the total width of the window.
pageXOffset
It returns the number of pixels you have scrolled the web page horizontally.
pageYOffset
It returns the number of pixels you have scrolled the web page vertically.
parent
It contains the reference to the parent window of the current window.
scheduler
It is entry point for using the prioritized task scheduling.
screen
It returns the ‘screen’ object of the current window.
screenLeft
It returns the position of the x-coordinate of the current window relative to the screen in pixels.
screenTop
It returns the position of the y-coordinate of the current window relative to the screen in pixels.
screenX
It is similar to the screenLeft property.
screenY
It is similar to the screenTop property.
scrollX
It is similar to the pageXOffset.
scrollY
It is similar to the pageYOffset.
self
It is used to get the current state of the window.
sessionStorage
It lets you access the ‘sessionStorage’ object of the current window.
speechSynthesis
It allows you to use the web speech API.
visualViewPort
It returns the object containing the viewport of the current window.
top
It contains a reference to the topmost window.
Here, we will cover some properties with examples.
OuterHeight/OuterWidth Properties of the Window object
The outerHeight property of the window object returns the window’s height, and the outerWidth property of the window object returns the window’s width.
Example
In the code below, we used the outerHeight and outerWidth property to get the dimensions of the window. You can change the size of the window and observe changes in the value of these properties.
<html><body><p id ="output1">The outer width of the window is:</p><p id ="output2">The outer height of the window is:</p><script>const outerHeight = window.outerHeight;const outerWidth = window.outerWidth;
document.getElementById("output1").innerHTML += outerWidth;
document.getElementById("output2").innerHTML += outerHeight;</script></body></html>
Output
The outer width of the window is: 1536
The outer height of the window is: 816
ScreenLeft Property of the Window Object
The window screenLeft property returns the left position of the current window.
Example
In the output of the below code, you can see the left position of the current window in pixels.
<html><body><div id ="output">Your browser window is left by:</div><script>const screenLeft = window.screenLeft;
document.getElementById("output").innerHTML += screenLeft +" px.";</script></body></html>
Output
Your browser window is left by: 0 px.
Window Object Methods
The ‘window’ object also contains methods like properties to manipulate the current browser window.
In the below table, we have covered the methods of the ‘window’ object with their description. You may use ‘window’ as a reference to access and invoke the below methods to make the code readable.
Method Name
Method Description
alert()
It is used to show the alert message to the visitors.
atob()
It converts the string into the base-64 string.
blur()
It removes the focus from the window.
btoa()
It decodes the base-64 string in the normal string.
cancelAnimationFrame()
It cancels the animation frame scheduled using the requestAnimationFrame() method.
cancelIdleCallback()
It cancels a callback scheduled with the requestIdCallback() method.
clearImmediate()
It is used to clear actions specified using the setImmediate() method.
clearInterval()
It resets the timer you have set using the setInterval() method.
clearTimeout()
It stops the timeout you have set using the setTimeOut() method.
close()
It is used to close the current window.
confirm()
It shows the confirm box to get the confirmation from users.
focus()
It focuses on the current active window.
getComputedStyle()
It returns the current window’s computed CSS style.
getSelection()
It returns the selection object based on the selected text range.
matchMedia()
It returns a new MediaQueryList object, which you can use to check whether the document matches the media queries.
moveBy()
It changes the position of the window relative to the current position.
moveTo()
It changes the position of the window absolutely.
open()
It opens a new window.
postMessage()
It is used to send a message to a window.
print()
It lets you print the window.
prompt()
It allows you to show a prompt box to get user input.
requestAnimationFrame()
It helps you to tell the browser that you want to perform an animation so the browser can update the animation before the next repaint.
requestIdleCallback()
It sets the callback functions to be called when the browser is Idle.
resizeBy()
It resizes the window by a particular number of pixels.
resizeTo()
It changes the size of the window.
scrollTo()
It scrolls the window to the absolute position.
scrollBy()
It scrolls the window relative to the current position.
setImmediate()
It breaks up long-running operations and runs the callback function instantly when the browser completes other operations.
setInterval()
It is used to execute a particular action after every interval.
setTimeout()
It is used to execute a particular action after a particular time.
stop()
It stops the loading of window.
Here, we will cover some methods with examples.
JavaScript window.alert() Method
The window.alert() method allows you to show the pop-up dialog containing the message, warning, etc. It takes the string text as an argument.
Example
In the below example, when you click the button, it will invoke the alert_func() function and show the pop-up box at the middle top.
The window.open() method is used to open a new window. It takes a URL as an argument, which you need to open in a new window.
Example
In the below code, we used the window.open() method to open a new window in the browser. You can see that the code opens the home page of the ‘tutorialspoint’ website in the new window.
<html><body><button onclick ="openWindow()"> Open New Window </button><script>functionopenWindow(){
window.open("https://www.tutorialspoint.com/");}</script></body></html>
JavaScript window.print() Method
The window.print() method lets you print the web page.
Example
In the below code, click the button to print the web page.
The Browser Object Model (BOM) in JavaScript refers to the objects provided by the browsers to interact with them. By using these objects, you can manipulate the browser’s functionality. For example, you can get the browser history and window size, navigate to different URLs, etc.
The Browser object model is not standardized. It depends on which browser you are using.
Here, we have listed all objects of the Browser Object Model with descriptions −
Window − The ‘window’ object represents the current browser window. You can use it to manipulate the browser window.
Document − The ‘document’ object represents the currently opened web page in the browser window. You can use it to customize the property of the document.
Screen − It provides information about the user’s device’s screen.
History − It provides the browser’s session history.
Navigator − It is used to get the browser’s information like default language, etc.
Location − The Location object is used to get the URL information, such as the hostname of the current web page.
Console − The console object allows developers to access the browser’s console.
JavaScript Window Object
The JavaScript window object represents the browser’s window. We can use different methods and properties of the window object to manipulate current browser window. For example, showing an alert, opening a new window, closing the current window, etc.
All the JavaScript global variables are properties of window object. All global functions are methods of the window object.
The other objects listed above such as document, screen, history etc., are the properties of the window object. We can access these objects as properties of the window object. We can also access them with referencing the window object. Look at the below example snippet to access the document object
window.document.write("Welcome to Tutorials Point");
or without window object −
document.write("Welcome to Tutorials Point");
The innerHeight and innerWidth properties of the window object are used to access the height and width of the browser window. We will learn JavaScript window object in detail in next chapters.
JavaScript Document Object
The document object is a property of the JavaScript window object. The whole HTML document is represented as a document object. The document object forms HTML DOM. It is root node of the HTML document.
The document object can be accessed as window.document or just document.
The document object provides us with many properties and methods to access the HTML elements and manipulate them. One such method is document.getElementById() to access the HTML element using its id.
We can access an element with id as “text” using getElementById() method and manipulate it
Example
<html><body><div id ="text">This text will be changed.</div><script>// Access the element with id as textconst textDiv = document.getElementById("text");// Change the content of this element
textDiv.innerHTML ="The text of this DIV is changed.";</script></body></html>
Output
The text of this DIV is changed.
JavaScript Screen Object
In JavaScript, the screen object is a property of window object. It provides us with properties that can be used to get the information about the device window screen. We can access the screen object as window.screen or just screen.
To get the width and height of the device screen in pixels we can use the screen.width and screen.height properties
Example
<html><body><div id ="width">Width of the device screen is </div><div id ="height">Height of the device screen is </div><script>
document.getElementById("width").innerHTML += screen.width +" px.";
document.getElementById("height").innerHTML += screen.height +" px.";</script><p> The above result may be different for different device.</p></body></html>
Output
Width of the device screen is 1536 px.
Height of the device screen is 864 px.
The above result may be different for different device.
JavaScript History Object
In JavaScript, the history object is also a property of the window object. It contains a list of the visited URLs in the current session. The history object provides an interface to manipulate the browser’s session history.
The JavaScript history object can be accessed using window.history or just history. We can use the methods of history object to navigate the URLs in the history list. For example to go the previous page/URL in the history list, we can use history.back() method.
JavaScript Navigator Object
The JavaScript navigator object is also a property of the window object. Using the ‘navigator’ object, you can get the browser version and name and check whether the cookie is enabled in the browser. We can access the navigator object using window.navigator. We can also access it without using the window prefix.
JavaScript Location Object
The JavaScript ‘location‘ object contains various properties and methods to get and manipulate the information of the browser’s location, i.e. URL. It’s also a property of JavaScript window object.
We can use the properties and methods of the location object to manipulate the URL information. For example, to get the host from the current URL, we can use the window.location.host or just location.host. The host is property of the location object.
Example
<html><body><div id ="output"></div><script>
document.getElementById("output").innerHTML ="The host of the current location is: "+ location.host;</script></body></html>
Output
The host of the current location is: www.tutorialspoint.com
JavaScript Console Object
The JavaScript console object allows us to access the debugging console of the browser. It is a property of the JavaScript window object. It can be accessed using window.console or just console.
The console object provides us with different methods such as console.log(). The console.log() method is used to display the message in debugging console.
What’s Next?
We have provided detailed information about each of the above objects in separate chapters.