Understanding DOM and BOM

Understanding DOM and BOM

01 Feb 2024
Intermediate
34.5K Views
5 min read
Learn via Video Course & by Doing Hands-on Labs

JavaScript For Beginners Free Course

DOM stands for Document Object Model. It is a standard defined by W3C (World Wide Web Consortium). 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.

In simple terms, the DOM is a way to represent the webpage in a structured hierarchical manner so that it will become easier for programmers and end-users to glide through the whole document. With the DOM, we can easily access and manipulate various tags available in DOM, attributes, IDs, classes, or the whole piece elements using commands or methods provided by Document objects and one of the most popular is "getElementById()" to access the specific element by using the ID attribute.

DOM tree objects can be accessed and manipulated with the help of any programming language since it is cross-platform and language-independent. Typically, we manipulate the DOM tree with the help of JavaScript and jQuery using multiple ways of accessing elements by their class names, ID, or the name of the element.

DOM API

Here, I am sharing some DOM API's objects, methods and properties.

DOM API Objects

  1. window

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

  2. document

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

  3. history

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

  4. location

    This object contains information about the current URL.

  5. navigator

    This object contains information about the client.

Read More: Javascript Developer Salary in India

DOM API Methods

DOM methods are actions that you can perform on document elements.

  1. appendChild

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

  2. createElement

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

  3. reload

    This method reloads the current document.

  4. removeNode

    This method removes the object from the document hierarchy.

Read More: 50+ Javascript Interview Questions and Answers

DOM API Properties

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

  1. appName

    This property retrieves the name of the client.

  2. appVersion

    This property Retrieves the platform and version of the application.

  3. href

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

DOM API Example

DOM API Example

HTML DOM

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 full object-oriented representation of your web page and in HTML DOM each and everything is a node. DOM tree nodes can be removed, added, and replaced by using DOM API.

Types of HTML DOM Tree Nodes

  1. Document Node

    This node represents the HTML document.

  2. Element Node

    This node represents an HTML element.

  3. Attribute Node

    This node represents an HTML element's attribute.

  4. Text Node

    This node represents Text inside an HTML element.

  5. Comment Node

    This node represents HTML Comment.

A Simple DOM Tree

<HTML>
<HEAD>
 <TITLE>Your Title</TITLE>
 <SCRIPT src="www.webgeekschool.com/jsfile.js"></SCRIPT>
</HEAD>
<BODY>
 <DIV>Your Div Text</DIV>
 <P>Your Para Text</p>
</BODY>
</HTML>

DOM tree representation of the above web page is given below:

BOM

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

BOM's main task is to manage browser windows and enable communication between the windows. Each HTML page that is loaded into a browser window becomes a Document object and 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 the part of the DOM structure.

The important BOM objects are as:

  1. document

  2. location

  3. history

  4. navigator

  5. screen

  6. frames

BOM Objects Example

Browser object model

What do you think?

I hope, now you have a better understanding of DOM and BOM. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Take our Javascript skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE

Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
Generative AI For Software Developers Jul 20 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Angular Certification Course Jul 20 SAT, SUN
Filling Fast
06:00PM to 08:00PM (IST)
Get Details
Azure Master Class Jul 20 SAT, SUN
Filling Fast
03:00PM to 05:00PM (IST)
Get Details
ASP.NET Core Certification Training Jul 28 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
Software Architecture and Design Training Jul 28 SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
.NET Solution Architect Certification Training Jul 28 SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
Azure Developer Certification Training Jul 28 SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification Training Jul 28 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
Data Structures and Algorithms Training with C# Jul 28 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
Angular Certification Course Aug 11 SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
ASP.NET Core Project Aug 24 SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this