Related Tags

html
css
javascript
web development

# What is DOM?

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

DOM stands for Document Object Model. In the world of web, all HTML webpages are referred to as documents. The Document Object Model represents each of these web pages in a tree-like structure to make it easier to access and manage the elements.



## How is a DOM created?

DOM contains a bunch of nodes where each node represents an HTML element. The <HTML> tag always comes at the top and hence is called the “root node”. The rest of the nodes come under it and hence are called “children nodes”. The nodes present at the bottom are called “leaves” and are usually filled with elements’ attributes, values and events.

In JavaScript, DOM is actually a class that makes it really easy to define each element present within a web page so it can be modified later. Whenever a page is loaded in the browser, its document object is formed that is named as “document”. You can apply built-in methods on this object to access and modify the HTML elements.



## Example

Consider this small HTML document:

• HTML
• Output

The Document Object Model of this code can be created like this:

RELATED TAGS

html
css
javascript
web development