What is the DOM and BOM in JavaScript?

JavascriptDomDom Events

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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

This article explains relationship between Javascript, DOM and BOM.

Solution 3 - Javascript

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

Solution 4 - Javascript

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.

Solution 5 - Javascript

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

Solution 8 - Javascript

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.

Solution 9 - Javascript

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

Solution 10 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionImranView Question on Stackoverflow
Solution 1 - JavascriptthejhView Answer on Stackoverflow
Solution 2 - JavascriptdecycloneView Answer on Stackoverflow
Solution 3 - JavascriptNick CraverView Answer on Stackoverflow
Solution 4 - JavascriptRevathi BalaView Answer on Stackoverflow
Solution 5 - JavascriptJulianView Answer on Stackoverflow
Solution 6 - JavascriptchaithanyaView Answer on Stackoverflow
Solution 7 - JavascriptBamidele AlegbeView Answer on Stackoverflow
Solution 8 - Javascriptsai krishnaView Answer on Stackoverflow
Solution 9 - JavascriptKhabirView Answer on Stackoverflow
Solution 10 - JavascriptUstasView Answer on Stackoverflow