JS: Browser Window Object
There are 3 kinds of objects you work with when using JavaScript for website:
- JavaScript Standard Objects and user defined objects. For example, function, array, date, regex, etc. [see Object Type]
- Browser's window object. This is the
window
object in browser. (This is called “host object” by JavaScript spec.) - Document Object. This is the object
window.document
.
Browser's Window Object (Browser Object Model. BOM)
The browser's window
object is the root global object.
Everything is a property of the window
object, including:
- JavaScript standard objects [see the Global Object]
- HTML page elements.
- DOM objects.
- Browser's functions and objects.

In browser console, type window
to view this object's properties. [see How to Use Browser Console]
The window
object has important properties. For example:
window.alert("hi")
window.open("http://example.com/")
[see DOM: Open URL window.open]window.setTimeout(…)
window.setInterval(…)
[see SVG Clock]window.encodeURI(…)
[see Encode/Decode URL tutorial]window.innerWidth
. [see Find Window Size]
window.localStorage
[see Web Storage]window.history
window.location
[see Get URL (window.location)]
You don't need to prefix window.
to use its methods or properties. For example, alert("3")
is same as window.alert("3")
The window object also has a property key "window"
,
so window.window
and
window.window.window
are the same as just
window
.
The window object and its properties and their behavior is called Browser Object Model (BOM).
Browser's Document Object (Document Object Model. DOM)
One of the most important property of window
is window.document
. This is the document object.
The document object represent the HTML/XML document in the browser window.
The document object contains methods to manipulate HTML elements and styles. This object system is called DOM (Document Object Model).
The DOM allows you to:
- Insert element. [see DOM: Create/Insert HTML Element]
- Remove element. [see DOM: Remove HTML Element]
- Change element's attributes. (such as class, id, name, width, etc.) [see DOM: Set Node Attribute Value]
- Change element's content. [see DOM: Change Element's Content]
- Change element's CSS style. [see DOM: Change CSS]
[see DOM: Basic DOM Methods]