What is DOM?

Key takeaways:

• The DOM (Document Object Model) is a hierarchical representation of a webpage.

• Each HTML element is represented as a node in the DOM tree.

• JavaScript allows us to access, modify, and interact with these nodes, enabling dynamic and interactive web content.

• Common DOM operations include selecting elements, updating content, creating new elements, and adding event listeners.

The Document Object Model (DOM) is a fundamental concept in web development that allows us to create dynamic and interactive websites. By understanding the DOM, we can access and manipulate every part of a webpage using JavaScript, making it possible to change content, structure, and styling directly from our code. Let’s learn what the DOM is, why it’s essential, and how we can work with it.

What is the DOM?

The DOM represents a web page as a structured tree of objects. When a web page loads, the browser creates a model of the page called the DOM, which organizes every element of the page, like headings, paragraphs, images, and links, into a hierarchical structure. This hierarchy resembles a tree, with the HTML document as the “root” and each element represented as a “node” in the tree.

Why is the DOM important?

The DOM is vital because it provides the foundation for interactive websites. With the DOM, we can:

• Dynamically add or remove elements on a web page.

• Change content, styling, or attributes of elements.

• Respond to user actions like clicks, form submissions, and key presses.

• Create animations and complex UI interactions.

Without the DOM, JavaScript wouldn’t be able to interact with HTML and CSS, making web pages static and non-interactive.

How is a web page formed?

The DOM is an object-based representation of the source HTML document. It has some differences, as we will see below, but it is essentially an attempt to convert the structure and content of the HTML document into an object model that can be used by various programs.

The object structure of the DOM is represented by what is called a “DOM tree”. It is so called because it can be thought of as a tree with a single parent stem that branches out into several child branches, each of which may have leaves. In this case, the parent “stem” is the root element, the child “branches” are the nested elements, and the “leaves” are the content within the elements.

How does the DOM work?

When an HTML document is loaded, the browser parses the HTML and CSS and constructs a DOM tree based on the document’s structure. This DOM tree is then accessible by JavaScript, allowing us to manipulate it.

Let’s look at a simple HTML document and how the DOM interprets it.

DOM tree representation

When this HTML code is loaded, the DOM tree structure will look like this:

Each HTML element becomes a node in the DOM tree. This structure enables JavaScript to access and manipulate each node individually.

Accessing and manipulating the DOM with JavaScript

To interact with the DOM, JavaScript provides various methods for selecting, modifying, and removing elements. Let’s go through some basic operations to understand how we can work with the DOM.

Example 1: Selecting an element

To select an element in the DOM, we can use methods like getElementById() or querySelector(). Let’s select the <h1> element from the example above.

In the above JavaScript code:

• Line 2: We use querySelector() to select the <h1> tag. This method returns the first matching element it finds.

• Line 5: We log the text content of the <h1> element, which should output “Welcome to the DOM” in the console.

Example 2: Changing content

Let’s update the content of the paragraph (<p>) element in our HTML.

In the above JavaScript code:

• Line 2: We select the <p> element using querySelector().

• Line 3: We change the textContent of the paragraph to a new string.

Example 3: Adding a new element

We can also use JavaScript to add new elements to the DOM. Let’s add a new list item to a list dynamically.

In the above JavaScript code:

• Line 2: We create a new <li> element.

• Line 3: We set the content of the <li> to “New list item.”

• Lines 6–7: We select an existing paragraph element and use appendChild() to add the new <li> element to it.

Example 4: Responding to user actions

Using the DOM, we can add event listeners to respond to user interactions like clicks or key presses.

In the above JavaScript code:

• Line 2: We select a <button> element.

• Lines 4–6: We add a click event listener that triggers an alert when the button is clicked.

Knowledge test

Let’s attempt a short quiz to assess your understanding.

Conclusion

The DOM is essential to web development, bridging the gap between HTML and JavaScript. By understanding and using the DOM, we can create engaging, interactive websites that respond to user interactions. Mastering the DOM is a crucial skill for any web developer.

Further readings

Understanding the DOM is essential for effective web development, as it serves as the backbone for manipulating HTML elements with JavaScript.

• To start building your knowledge, you can explore what is the JavaScript HTML DOM for foundational concepts.

• Next, learn how to check if the DOM element is a text input in JavaScript to identify input fields and their types.

• You can then move on to how to add, remove, and toggle classes of a DOM element in JavaScript for dynamic styling.

• After mastering class manipulation, delve into how to check if a DOM element contains a CSS class using JavaScript to manage styling efficiently.

• As you gain confidence, explore how to remove all children of a DOM element in JavaScript for better DOM management.

• Further your understanding by learning how to remove a DOM event listener using JavaScript to prevent memory leaks in your applications.

• To round out your knowledge, check out what are some best JavaScript DOM practices for optimizing your code.

• Finally, dive into how to handle DOM events using JavaScript for responsive designs and learn what are the different ways to select DOM elements in JavaScript to streamline your coding process.