DOM - Document Object Model

DOM stands for Document Object Model.

It as a bridge or a translator between your JavaScript code and your HTML webpage.

When your browser loads an HTML file, it reads the code and builds an in-memory "tree" representation of everything on the page. Every HTML tag (like <div>, <h1>, <img>, or <button>) becomes an object (or node) that JavaScript can interact with.

What the DOM Allows You to Do

Because of the DOM, JavaScript can dynamically change what you see on the screen without needing to reload the page. You can:

• Change content: Update text or HTML inside an element (like .innerText or .innerHTML).

• Modify styles: Change colors, sizes, or layouts instantly.

• Create and delete elements: Build brand-new HTML tags on the fly (using document.createElement()) or remove them (using .remove() or .innerHTML = "", just like in your product catalog project).