CODEWITHSUNDEEP
javascriptdomdom-events
Imran
Imran

Reputation: 11654

What is the DOM and BOM in JavaScript?

What is the DOM and BOM in JavaScript? If someone could explain these in layman terms it would be great! I like to get a deeper understanding of these.

Upvotes: 111

Views: 113526

Answers (10)

Khabir
Khabir

Reputation: 5854

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

DOM Methods:
document.getElementById(id)
document.getElementsByTagName(name)
document.getElementsByClassName(name)
document.createElement(element)
document.removeChild(element)

Properties:
document.body
document.cookie
document.doctype
document.documentElement
document.documentMode

More details

The Browser Object Model (BOM)
There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM. It consists:

  • window
  • screen
  • location
  • history
  • navigator
  • popup alert
  • timing
  • cookies

More Details

Upvotes: 1

Ustas
Ustas

Reputation: 390

BOM stands for Browser Object Model. Unlike DOM, there is no standard defined for BOM, hence different browsers implement it in different ways. The collection of browser objects is collectively known as the Browser Object Model.

BOM main task is to manage browser windows and enable communication between the windows (i.e BOM deals with entire browser). Each HTML page which is loaded into a browser window becomes a Document object and a document object is an object in the BOM. You can say BOM is a superset of DOM. BOM has many objects, methods, and properties that are not part of the DOM structure.

while

DOM stands for Document Object Model. It is a standard defined by W3C (World Wide Web Consortium) and is specific to current HTML document (i.e DOM deals with document alone). DOM is a programming interface (API) for representing and interacting with HTML, XHTML and XML documents. It organizes the elements of the document in a tree structure (DOM tree) and in the DOM tree, all elements of the document are defined as objects (tree nodes) which have properties and methods.

DOM tree objects can be accessed and manipulated with the help of any programming language since it is cross-platform and language-independent. DOM is a subset of BOM, we can manipulate DOM tree with the help of JavaScript and jQuery for example.enter image description here

Upvotes: 1

chaithanya
chaithanya

Reputation: 41

DOM : The document object represents the whole html document. When html document is loaded in the browser, it becomes a document object.

BOM : The window object represents a window in browser. An object of window is created automatically by the browser.

Upvotes: 4

sai krishna
sai krishna

Reputation: 51

DOM -> Document Object Model 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.

BOM -> 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.

Upvotes: 3

Bamidele Alegbe
Bamidele Alegbe

Reputation: 534

BOM means Browser Object Model . These are objects that you can use to manipulate the browser. they are navigator

  • navigator
  • screen
  • location
  • history
  • document

they are all children of the Window Object. DOM is Document Object Model is part of the BOM and it helps you manipulate the content of the loaded page file. this include the HTML and CSS

Upvotes: 3

thejh
thejh

Reputation: 45568

The BOM (Browser Object Model) consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page. You can manipulate it using javascript.

Upvotes: 185

Revathi Bala
Revathi Bala

Reputation: 159

DOM means Document Object model..when the webpage is loaded the browser creates a document object model for the page..All the objects are arranged as tree structure...

BOM means Browser Object Model.window object is supported by all browsers it represents the window browser..All global JavaScript objects, functions, and variables automatically become members of the window object.

Upvotes: 6

Julian
Julian

Reputation: 4666

You can find more information about Javascript on Mozilla Foundation.

DOM

https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Introduction

BOM

https://developer.mozilla.org/en-US/docs/WebAPI/Browser

Upvotes: 4

decyclone
decyclone

Reputation: 30820

  • DOM - Document Object Model
  • BOM - Browser Object Model

This article explains relationship between Javascript, DOM and BOM.

Upvotes: 49

Nick Craver
Nick Craver

Reputation: 630349

They're just different objects you're dealing with:

  • The DOM is the Document Object Model, which deals with the document, the HTML elements themselves, e.g. document and all traversal you would do in it, events, etc.
  • The BOM is the Browser Object Model, which deals with browser components aside from the document, like history, location, navigator and screen (as well as some others that vary by browser).

Upvotes: 44

Related Questions