Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
javascript
web development

What is DOM?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

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.

svg viewer

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:

svg viewer

RELATED TAGS

html
css
javascript
web development
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

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.

Keep Exploring