Web Development Course:
The Window Object
All browsers support the object
All global variables are window object properties, and all global functions are its methods. The whole HTML document is a window property, too.
In the example below, you can see how the
document object (which belongs to the HTML DOM) is in the
window object's property. Here, we select the
body of the document:
This next example does the exact same thing. However, it is used to show that the
window is not necessary for the function to work:
BOM vs. DOM
For a beginner, it's easy to get confused and lost among various terms, especially the ones that look a lot alike. Therefore, we thought we should clarify once again what is the main difference between BOM and DOM.
DOM (document object model) actually represents the document: all of the HTML elements, events, etc. Thus, DOM is part of the BOM.
Getting Window Size
Height and width properties can be used to return the browser's window size. Both of the properties return the size in pixels:
window.innerHeightreturns the height of the browser's window.
window.innerWidthreturns the width of the browser's window.
Keep in mind we use different properties for Internet Explorer 8 and older versions:
The example below displays a universal code that works on any browser:
var w = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth; var h = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
Note: the window property returns the browser window's height and width excluding toolbars.
window.open()is used to open a new window.
- By using
window.moveTo(), you can move the current window.
- You should choose
window.resizeTo()to resize the current window.
window.openis used to open a new one.
- DOM is part of the BOM.