a literal tree very unrelated to the DOM tree
So I read this,
and thought this needed explanation in my mind and here it is
When working with JavaScript in the context of web development, it's crucial to understand the distinction between the static HTML code and the dynamic Document Object Model (DOM) that JavaScript interacts with. This explanation highlights the difference:
HTML: This is the structure and content of your web page. It's the static markup you write in your HTML files, defining elements, their attributes, and their arrangement. The initial state of your web page is determined by the HTML you provide.
DOM: Once your HTML is loaded by a web browser, it's converted into the DOM. The DOM is a dynamic, live representation of your web page's structure that JavaScript can interact with. JavaScript can modify the DOM by adding, modifying, or removing elements and attributes. These changes affect how the web page behaves and what the user sees.
Here's a breakdown of your statement:
"JavaScript does not alter your HTML": This means that the original HTML source code you wrote remains unchanged. The structure and content you defined in your HTML file won't be modified by JavaScript.
"but the DOM - your HTML file will look the same": While JavaScript can make changes to the DOM, which represents the live state of your web page, those changes do not directly affect the original HTML source file. This ensures that the code you've written remains intact and helps maintain separation between the static structure and dynamic behaviour of your web page.
"but the JavaScript changes what the browser renders": JavaScript's manipulation of the DOM affects how the browser renders the content on the user's screen. By altering the DOM, JavaScript can add interactivity, modify content, or respond to user actions, thereby influencing the visual and functional aspects of the webpage without altering the original HTML.
That's all for now, May your console always logs🎮