A web page is built on the concept of what is called the DOM, which stands for Document Object Model. The DOM defines how the data of a web page is organized and manipulated. In JavaScript, we interact with the DOM to affect the web page itself. The Document in DOM refers to the HTML page. The Model in DOM refers to the data in a web page. You will hear the phrase DOM a lot when doing web development. You were introduced to the DOM way back in Web Design 1, but might not have understood that was what you were using. Here is an example of DOM structure…
Each one of the above items is known as a DOM element (h1, p, button). There are various way we can use JavaScript to interact with the DOM. One of the ways is by assigning IDs, which you have done with CSS.