I explain how the browser renders an interactive webpage like you were five

I have being using Html, Css and JavaScript for quite a while now and didnt know until recent 😭, I mean, I knew about the DOM just not in-depth. I DELIBERATELY had to read up on this. So here is LIKE a summary 🙂.
When the browser gets your html SOURCE file, it wouldn't tamper with that but, creates KIND OF LIKE a copy of the document, which is known as the DOM(Document Object Model), which is an object representation of all the elements in the html SOURCE file. It is KIND OF LIKE a copy because the DOM is not entirely like the SOURCE file, meaning if in your html file you put the visible contents outside the body tags but not inside the head tags though, the DOM would be a CORRECTED version of that. Same is done for the cascading style sheet, it creates a Cascading Style Sheet Object Model (CSSOM), which is a representation of all the elements and styles associated with them. Now the browser can tamper with the DOM and CSSOM using your Javascript code or some other program. Hope you understand to this point?🙃🙃.
So the browser is creating a perfect copy of the html file called DOM and then meets a script tag, it pauses on the creation and runs the Javascript and then resumes creation. Creation of a DOM is when the browser is PARSING the html document (like reading the file to determine the content and structure). Using the DOM and the CSSOM the browser creates the RENDER TREE, the visible contents of what would be rendered on the viewport, meaning elements on the DOM with display style property of "none" won't show up. 🙃 The End.
Important points i missed, that you think a 5 years old programmer should know 🤔😏🙂??.