DEV Community

Cover image for DOM (Document object model) in less than 500 words!
Rakshit Nayak
Rakshit Nayak

Posted on • Edited on

5 1

DOM (Document object model) in less than 500 words!

Hello 🙋‍♂️,in this article we will talk about DOM in less than 500 words

DOM(Document Object Model) is a software interface for HTML, XML and SVG documents. It provides a structured view of the document(tree) as a group of nodes and objects that have properties and methods, and defines the way in which the structure can be accessed by the program.
DOM binds web pages to scripts or programming languages.

Image description

The basis of an HTML document is tags.
According to the DOM, an HTML tag is an object and nested tags are its "children".
All objects are available with JavaScript, we can use them to modify the page.
For example, document.body is an object for the <body> tag.

DOM EXAMPLE

Image description

And this is a view of an HTML document as a tag tree:
Image description

Tags are node elements(elements). They form the structure of the tree: <html> is the root node, <head> and <body> its child nodes, etc.

Text inside the elements forms text nodes named #text. The text node contains only a string of text. It cannot have descendants (it is always at the lowest level).
Spaces and line breaks are also symbols. Like letters and numbers, they form text nodes and become part of the DOM tree.

Here you can see Dom in real time

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay