Why do we need a DOM? Why can’t we just manipulate the HTML? I would like to know the reasoning behind it, and why the concept of a DOM was born.
The purpose of the document object model is to manipulate a document with javascript. Without that, no front end scripting involving the document is possible. (Note that you can alter HTML elements in real time with CSS as well, but you’re limited to CSS properties indeed).
As for HTML, it’s a markup language, not meant for scripting. Just as styling is delegated to CSS, front end scripting is delegated to JS.
The use of HTML/CSS and JS is consensual because all major browsers implement them, following specifications (W3C specifications for HTML/CSS and ECMAScript specification for JS). (Note that while there are official sources to tell how they must behave, there are minor implementation differences for all three between browsers).
Simply put, HTML is to describe what is in a document, CSS is to describe how is what HTML describes, JS is to script anything with all that, based on an event driven fashion.