DEV Community

Cover image for DOM (Document object model)
Rakshit Nayak
Rakshit Nayak

Posted on

DOM (Document object model)

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

Top comments (0)