Understanding the Document Object Model (DOM) in JavaScript

When working with JavaScript in the browser, one of the most important concepts is the Document Object Model (DOM).

The DOM is another built-in object in JavaScript, called the document object, and it represents the entire web page. That’s why it’s called the Document Object Model — it models the structure of a web page in a way JavaScript can understand and manipulate.

What is the DOM?

• The DOM is a bridge between HTML and JavaScript.
• It allows us to access and update elements on the page using JavaScript.
• Every element in your HTML (headings, paragraphs, buttons, images, etc.) is represented as an object inside the DOM.

In short: JavaScript + HTML = DOM

Accessing the DOM

The document object comes with many useful properties and methods:

console.log(document.title); // prints the page title
console.log(document.body);  // gets the <body> tag

Methods in the DOM

In JavaScript, a method is just a function stored inside an object.

The DOM provides many helpful methods. One of the most commonly used is:

document.querySelector('button');

querySelector() lets us select any element from the page and use it in JavaScript.

Get Waruni Gunasena’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example:

<button class="js-button">Calculate</button>
<script>
  const calculateButtonElement= document.querySelector('.js-button');
  console.log(calculateButtonElement.innerHTML);
</script>

Modifying Content with .innerHTML

Every HTML element has a property called .innerHTML.
We can use it to read or update the content inside an element.

heading.innerHTML = "Hello JavaScript!";

Events in the DOM

A web page is interactive because of events.
Some common events are:

• onclick → click event
• onkeydown → when a key is pressed
• onscroll → when the page is scrolled
• onmouseenter → when mouse hovers over an element
• onmouseleave → when mouse leaves the element

Example:

<button class="btn">Click Me</button>
<script>
  document.querySelector('.btn').onclick = function() {
    alert('Button was clicked!');
  };
</script>

Every event listener gets an event object that gives extra information about the event (like which key was pressed, or mouse position).

The Window Object

Just like the document represents the web page, the window object represents the browser itself.

We usually don’t need to type window explicitly — JavaScript adds it automatically.

Examples:

window.document; // same as just 'document'
window.console.log('Hello'); // same as 'console.log("Hello")'
window.alert('Hello World'); // shows a popup

Conclusion

The DOM is the foundation of modern web development.
With the DOM, JavaScript can:
Access elements on the page
Change text, styles, and attributes
Respond to user interactions with events
Communicate between the web page and the browser

Mastering the DOM is the first step towards building dynamic, interactive websites.