What is DOM in a nutshell?..

Started by arthyk, Sep 16, 2022, 07:40 AM

Previous topic - Next topic

arthykTopic starter

Colleagues, can someone briefly explain what DOM is in an understandable language?

That is, I understand that this is the document object model, but is it necessary to access window elements or is there another way to change their parameters?


According to the document object Model ("Document Object Model", short DOM), each HTML tag is an object. Nested tags are the "children" of the parent element.
The text that is inside the tag is also an object.
All these objects are accessible using JavaScript, we can use them to modify the page.

For example, document.body – object for the <body> tag.
If you run this code, the <body> will turn red for 3 seconds:

document.body.style.background = 'red'; // make the background red
setTimeout(() => document.body.style.background = ", 3000); // go back

This was just a small example of what DOM can do.

HTML/XML documents are presented in the browser as a DOM tree.
Tags become nodes-elements and form the structure of the document.
Text becomes text nodes.
... etc. Everything that is written in HTML is also in the DOM tree, even comments.
To change the elements or check the DOM tree, we can use the developer tools in the browser.


If you translate from a programming language into a simple one, you can imagine that you are an artist in this business, come up with various cool transitions and links to others from the link and indicate good information between them for those who need it. For example, I recently encountered programming in general and can to say it's like a canvas for an artist.Have a nice day! 8)


A DOM is an object that is associated with an HTML source document. 
Or it will be even simpler this way, HTML itself is just the text of the page, and DOM is an object created by the browser when parsing this text.
The browser uses the DOM and provides us with programmatic access to it, allowing us to manipulate and change the DOM.   Probably already guessed, the simplest example is JavaScript without reloading the page, changes the styles of the document.
Therefore, DOM is a user interface formed based on the source HTML. It is used by browsers to determine what to visualize, display in the viewport.


The browser does not show the HTML document in its natural form, but parses it to build a page tree or DOM.
And it is needed just to manage HTML content, to make the site interactive and dynamic. Because HTML is just text, as we have already written above.
And with the help of nodes - elements of the DOM tree, we can manipulate the output to the browser of our HTML.
And not only DOM is used to visualize the site, the most important property is that with the help of our scripts, we can get all the actions performed with the site page, clicks, filling out forms, etc.