It is now inevitable for all businesses to go online and have a website, especially with the outbreak of the Corona virus, having a website has become widespread. The job market has also heated it up. Knowing JavaScript and its concepts will help you become a professional coder, website designer, and web developer.

So stay with the article “Getting to know BOM and DOM in JavaScript” which is part of the series of JavaScript articles until the end.

What is DOM?

DOM stands for Document Object Model. This is a standard defined by the W3C (World Wide Web Consortium). DOM is a programming interface (API) for displaying and interacting with HTML, XHTML and XML documents. It organizes document elements in a tree structure (DOM tree), and in the DOM tree, all document elements are defined as objects (tree nodes) that have properties and methods.

DOM tree objects can be accessed and manipulated using any programming language, as it is cross-platform and language-independent. Normally, we manipulate the DOM tree with the help of JavaScript and jQuery.

DOM API Objects


A window object represents an open window containing a DOM document.


The document object displays the HTML document in a specific window.


This object contains information about the URLs visited by the client.


This object contains information about the current URL.


This object contains information about the client.

DOM API Methods

DOM methods are actions you can take on document elements.


This method adds an element to the object as a child.


This method creates an instance of the element for the specified tag.


This method reloads the current document.


This method removes the object from the document hierarchy.

DOM API Properties

HTML DOM properties are values (of document elements) that you can set or change.


This property retrieves the name of the client.


This feature retrieves the app’s platform and version.


This property sets or retrieves the entire URL as a string.


When a web page is loaded, the browser creates a DOM tree for all the objects (Html elements) of that page. The HTML DOM is a completely object-oriented representation of your web page, and in the HTML DOM everything is a node. DOM tree nodes can be removed, added and replaced using the DOM API.

Types of HTML DOM tree nodes

Document Node – document node

This node represents the HTML document.

Element Node – element node

This node represents an HTML element.

Attribute Node – attribute node

This node represents the attribute of an HTML element.

Text Node – text node

This node represents the text inside an HTML element.

  Comment Node

This node represents HTML comments.

What is a BOM?

BOM stands for Browser Object Model. Unlike the DOM, there is no defined standard for the BOM, so different browsers implement it in different ways. Typically, the collection of browser objects is collectively referred to as the browser object model.

The main task of BOM is to manage browser windows and enable communication between windows. Each HTML page that is loaded in the browser window becomes a document object, and the document object is an object in the BOM. You can say BOM is a superset of DOM. The BOM contains many objects, methods, and properties that are not part of the DOM structure.

Important BOM objects

  • Document – document
  • location
  • history
  • Navigator
  • Screen – screen
  • Frames


Leave a Reply

Your email address will not be published. Required fields are marked *