DOM in JavaScript — What Actually Happens When Your Code Runs

You’ve probably written DOM code like this before: document . getElementById ( " title " ). textContent = " Hello World " ; And it works. But if I ask you: “What exactly just happened inside the browser?” Most people pause there. Let’s fix that — step by step, no skipping, no guessing. Start With This Simple HTML <div id= "app" > <p id= "text" > Loading... </p> <button id= "btn" > Update </button> </div> Clean. Nothing fancy. Now Add JavaScript const text = document . getElementById ( " text " ); const btn = document . getElementById ( " btn " ); btn . addEventListener ( " click " , () => { text . textContent = " Data loaded " ; }); Looks simple. But under the hood, a lot is happening. Let’s slow it down. Step 1: Browser Builds the DOM (Before Your JS Runs) The moment the page loads: Browser reads your HTML Parses it line by line Converts it into a DOM tree Internally, it looks something like: div#app ├── p#text ("Loading...") └── button#btn ("Update") Important: This structure lives i