What exactly is DOM, and why you should know how to use it?

Question

Several times I have heard this concept but in a vague or abstract way and yet I know it is an important concept that every web developer should understand well (sometimes it becomes an interview question). According to Wikipedia: "The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed."

Could someone explain it in a clear and simple way?

Do you know some good examples of how and when to work with the DOM?

Answer 1

From what I understand, DOM is the concept of using JS to manipulate html elements on the webpage. Basically, DOM is what makes the webpage interactive.

Answer 2

Thanks for the reply and the link Martin Taylor. It looks to be quite a comprehensive tutorial on DOM (the link you shared https://www.w3schools.com/js/js_htmldom.asp ).

I was doing some more searching and found three other very useful articles where they explain quite well in a somewhat brief, clear and practical way what DOM is, what it is not and how to use DOM:

https://www.freecodecamp.org/news/dom-explained-everything-you-need-to-know-about-the-document-object-model/

https://bitsofco.de/what-exactly-is-the-dom/

https://www.freecodecamp.org/news/whats-the-document-object-model-and-why-you-should-know-how-to-use-it-1a2d0bc5429d/

In a very summarized way I can quote the following, although I highly recommend to take a look at the articles I just mentioned to see the examples:

"The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

'The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.' "

"So, what’s the DOM?

Do you know all those cool animations that you see around, that make you think to yourself, “Wow, I wish I could make something like that”? All of those animations are made by manipulating the DOM.[...]

The DOM (Document Object Model) is an interface that represents how your HTML and XML documents are read by the browser. It allows a language (JavaScript) to manipulate, structure, and style your website. After the browser reads your HTML document, it creates a representational tree called the Document Object Model and defines how that tree can be accessed.

Advantages

By manipulating the DOM, you have infinite possibilities. You can create applications that update the data of the page without needing a refresh. Also, you can create applications that are customizable by the user and then change the layout of the page without a refresh. You can drag, move, and delete elements."