What is the DOM?


DOM stands for Document Object Model. It is a programming interface that represents a web page as a tree of objects.

Every HTML element on a page — such as headings, paragraphs, buttons, and images — becomes an object in the DOM. JavaScript can use the DOM to read, change, add, or remove these elements.

The DOM is what makes web pages interactive. Without it, websites would only display static content.

Why the DOM is Important

  • It allows JavaScript to control web pages
  • It makes websites interactive
  • It lets you change content dynamically
  • It helps handle user actions
  • It is the base of all front-end development  

Every modern website depends on DOM manipulation.

This HTML code creates two elements on a web page.

When the browser loads this page, it converts these elements into objects in the DOM tree.

Here, JavaScript uses the document object to access an HTML element by its id.

This is the first step in DOM manipulation.

This example shows how JavaScript can change the content of a web page using the DOM.

By understanding what the DOM is, students gain the foundation needed to build interactive and professional front-end applications.