DOM vs BOM in Javascript

DOM (Document Object Model)

The DOM is a language- and platform neutral interface that allows programs and scripts to dynamically access and update the content and structure of documents.

The DOM in JavaScript is the API to access the elements inside the document. It maps the entire Document into an hierarchy of parent and child tree. Each node can hold number of children element or can inherit to other parent element in some or the other way.

One can access each element and it’s properties using the DOM structure. This model describes how the element inherits the property of another element.

DOM has following level of abstractions

  • DOM level 1 The level one of DOM consist of two modules
    • DOM Core: It maps the XML-based document and gives the access to user to manipulate and read any part of the document
    • DOM HTML: This module extends the core by adding HTML specific objects and methods.
  • DOM level 2 has new modules deal with the new types of interfaces
    • DOM Views: Tracks different views of document such as, how the document should appear before and after applying the styles.
    • DOM Events: It interfaces the event to the documents elements
    • DOM Styles: This interface the styling to the document
    • DOM traverse and Range: DOM traversing provides the way to modify or add new element into the DOM hierarchy.
  • DOM level 3 The level three of DOM abstracts the methods to validate the document, DOM validation. The level three fully supports the XML 1.0 which inclues infoset, XPath and XML base.
  • Other abstraction of DOM
    • Scalable Vector Graphics (SVG)
    • Mathematics Markup language (MathML)
    • Synchronized Multimedia Integration Language (SMIL)
    • Canvas in HTML5

BOM (Browser Object Model)

This is an informal term as there is no W3C or WHATWG standard that mentions it.

The Browser Object Model is a larger representation of everything provided by the browser including the current document, location, history, frames, and any other functionality the browser may expose to JavaScript. The Browser Object Model is not standardized and can change based on different browsers.

One simple definition would be that the BOM encompasses the entire object structure which is accessible via scripting in the browser, beginning with the window object which “contains everything else”, since it’s the global object.

The window object contains lots of properties (try console.dir( window );). These properties are specified in numerous web-standards. The “core” specification of the window object is as of now still specified in the HTML standard – see here, but I guess it’s only a matter of time until the editors decide to transfer this specification into a separate standard.

Since DOM is one of the object of BOM, DOM is the child of BOM and they relate to each other. One can access document by simple writing document or window.document.

Advertisements

Published by

gradgospels

I am a Software Engineer by profession. I'm ever curious to find the latest technology in the field and put it to good use. Quite a bit of my free time goes to learn different tools and technology.I enjoy development for Linux, building/leading teams, and contributing to different open source projects. Even though I have a very wide range of interests when it comes to build software, my current focus is on Frontend development. I am thrilled to work with HTML,CSS,JS, JQuery and Ajax like concepts. I also love to read, write, travel and cook.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s