The Browser Object Model (BOM): Definition & Relation to the DOM

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

The Browser Object Model (BOM) is explained in this lesson and compared to the Document Object Model (DOM). We also show how to use JavaScript to manipulate the BOM.

The Browser Object Model (BOM)

Comparison to the Document Object Model (DOM)

In related chapters of this course, you have learned that the Document Object Model (DOM) is a standard set and maintained by the World Wide Web Consortium (W3C) that defines how web browsers interpret an HTML or XML document.

On the other hand, the Browser Object Model (BOM) defines how browsers handle the view and some other properties of a document, as opposed to its contents, which is primarily what the DOM covers.

A very important point to make here is that unlike the DOM, the BOM is not a standard set by any organization. It is more of an approach that programmers can use, taking advantage of the fact that all web browsers support certain objects and their related methods.

The Window Object

All web browsers support the window object, which refers to the the browser window as it appears on screen. Its size may be the same as the device screen, called the viewport, or smaller.

The document object (what the DOM handles), is included inside the window object and refers to the HTML or XML content displayed in the browser window. If the document has been assigned height and width attributes, its size may even be larger than the viewport or window.

Using JavaScript with the BOM

The use of JavaScript with the BOM involves manipulating the window object in relation to:

  • popup alerts,
  • location,
  • timing
  • screen.

Some other window objects are: history and navigator.

We'll briefly discuss the first four objects and methods, then show a code example to illustrate their use.

Popup Alert

Popup alert methods display a message box for the user in a separate, smaller window to that of the browser. These are used to inform the user of something, or to prompt them to make a choice or enter some kind of input. There are three types of alerts:

  • Alert
  • Confirm
  • Prompt

The alert box displays a message and contains a single button, ''OK,'' which the user presses to close the window.

The confirm box displays a message and contains two buttons, ''OK'' and ''Cancel.'' Behind the scenes, if the user presses ''OK,'' this will send the value ''true'' to the JavaScript code, and if they press ''Cancel,'' this will send the value ''false.''

The prompt box again displays a message and contains the ''OK'' and ''Cancel'' buttons, but also includes a text input field for the user to enter a value. If the user presses ''OK,'' this returns the input value, and if they press ''Cancel,'' this returns a null value.

Location

The window's location object can be manipulated to display the browser's current URL or load a different URL.

Timing

Timing adds a time element to what's displayed in the browser window. It can run a JavaScript function after a set period of time, using the setTimeout() method, or repeat it continuously as when animating elements on the page using the setInterval() method.

Screen

The screen object contains information like width and height about the device screen (viewport), as opposed to the browser window.

Example

Now let's illustrate how these objects and methods work through an example. It's best to copy and save this code as an HTML file, then load it in a browser to see it in action, rather than focus too much on the JavaScript syntax.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account
Support