The Bridge to HTML

Everything we've learned so far has been pure JavaScript logic. But how does JavaScript actually interact with a webpage? How do we change the text of an <h1> or change the color of a button?

The answer is the Document Object Model (DOM).

What is the Document Object?

When a web browser loads an HTML document, it creates a hierarchical, tree-like structure of all the HTML elements in its memory. This tree is the DOM.

The browser then provides JavaScript with a magical object called document (window.document). This object represents your entire HTML page and gives you the power to manipulate it.

What can the Document Object do?

Using the document object, JavaScript can:

Read all HTML elements and attributes on the page.
Change HTML elements and attributes.
Change CSS styles dynamically.
Remove existing HTML elements and create brand new ones.
React to user events (like clicks, keypresses, and scrolls).

The DOM Tree Structure

Imagine your HTML like this:

<html>
  <head>
    <title>Himubey</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Learn JavaScript</p>
  </body>
</html>

In the DOM, document is the root. Inside document is <html>. Inside <html> are two children: <head> and <body>, and so on. Every single HTML tag becomes an "element node" in this tree.

In the next few lessons, we will learn the specific methods used to select and manipulate these nodes!

💡 Himanshu's Tip:

The DOM is NOT part of the JavaScript language itself! JavaScript is a programming language, while the DOM is an API (Application Programming Interface) provided by the web browser (Chrome, Firefox, Safari) that allows JavaScript to talk to the HTML.

Interview Questions

What does DOM stand for?
What is the fundamental difference between HTML and the DOM?
Name three things JavaScript can do to a webpage using the DOM API.