JavaScript: Browser Object Model
The Browser Object Model
JavaScript's power and flexibility comes from its ability to access and manipulate objects that are native to the browser environment.
The collection of these objects is known as the Browser Object Model (BOM). The BOM is a tree-like hierarchy of objects, each with useful access properties and methods. Essentially, this object allows you to talk with your user's browser.
Functions include querying the the browser window size, the main heading of the page, a pointer to the last page in a user's history and more!
Elements of the Browser Object Model
The BOM's root is the window object, which displays properties of the current open window or tab. It has several children, most of which we'll cover in this section.
Here is a brief description of each element on the tree.
- document
- Contains all HTML elements of the current page.
- frames
- Any frames embedded within the current page.
- history
- Contains a stack of sites visited in the current session.
- location
- Stores URL of the current page.
- navigator
- Stores information about the browser being used, and the OS used by the browser.
- screen
- Display properties of the user's computer or device.
Because the document element has much to cover, it deserves its own section; we'll cover the other elements here, starting with the window object.
The Window Object
The window object represents the current open window on a browser.
Properties
The window object has a slew of properties that can tell you (the programmer) about its properties. Skim through these properties and try clicking on their names to see output in the JavaScript console.
closed- Returns True if window is closed.
defaultStatus- Set the text on the status bar.
innerHeight- The inner height of the page (not including toolbar, other tabs, etc).
innerWidth- The inner width (excludes toolbar, other tabs, etc.).
outerHeight- The outer height of a window (including toolbar, other tabs, etc).
outerWidth- The outer width of a window.
location- Window's current URL.
name- Name of the window.
parent- Used with frames to refer to the window that created a particular window or is one level up from the frame.
parent- Reference to the window that the current window came from.
pageXOffset- The number of pixels user has scrolled horizontally from the upper-left corner of document.
pageYOffset- The number of pixels the user has been scrolled vertically.
screenX- Horizontal coordinate of the window relative to the screen.
screenY- Vertical coordinate of the window relative to the screen.
top- The top-most parent window.
Some properties such as top and parent return a reference to another window object.
Additionally, you can access its child elements - document document, frames, history, andnavigator. We'll cover this in the next lesson.
Methods
window contains a good number of methods. In fact, we have already looked at one of them - alert(), which outputs an popup dialog message to the user.
Some of these methods require a parameters, so Google the methods if you want to see exactly how a method works.
alert()- Opens a popup window. User must click OK to close.
prompt()- Prompts user for an input
open()- Opens new browser window with specified URL.
close()- Closes window.
print()- Opens print dialog.
Moving a window object
There are also functions you can use to move the window object.
moveBy()- Move the window relative.
moveTo()- Moves the window to a specific location.
resizeBy()- Change size of window relative to current size.
resizeTo()- Change size of window to specified size.
Other BOM elements history, location, navigator, screen
There are a handful of other Browser Object Models that we will briefly go over here.
Screen
The window.screen object obtains information about the user's screen.
availHeight,availWidth- Width and height of the available screen (excluding taskbars).
height,width- Width and height of the available screen (with taskbars).
colorDepth- Number representing the bit depth of the color palette on user's screen.
Navigator
The window.navigator object is used to query a number of elements about the visitor's browser and environment.
language- Determine language of browser.
appName- Check name of browser.
geolocation- Returns geolocation object used to locate user's position.
onLine- Determines if user is online.
platform- Which platform user is using (OS X, Windows, Linux).
cookieEnabled- Determines whether cookies are enabled.
javaEnabled()- Check if user's Java is enabled.
Location
The window.location object provides information about the current URL.
hash- Returns anchor part of a URL.
host- Returns hostname and port number of URL.
pathname,port- Returns path or nort number of URL.
hostname- Returns hostname of a URL.
origin- Returns protocol, hostname and portname of a URL.
assign()- Loads new document.
reload()- Reload current document.
replace()- Replace current document.
History
The window.history gives you information regarding the user's history. Due to security concerns, we can't directly access which URL's our users have visited, but we may find other parameters.
length- Return the length of the user's history.
back(),forward()- Move the user forward or back a page.
go()- Loads specific URL from history list.