How to Work with the DOM: Event Listeners and Manipulation

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document, such as elements, attributes, and text. JavaScript can interact with the DOM to dynamically change the content, structure, and style of a web page. If you're a developer or just starting out. I recommend signing up for our free newsletter 'ACE Dev' . It gets delivered to your inbox and includes actionable steps and helpful resources. Join us now In this blog post, we'll explore two fundamental aspects of working with the DOM: event listeners and DOM manipulation. We'll cover how to attach event listeners to DOM elements to respond to user interactions and how to manipulate the DOM to dynamically update the content and appearance of a web page. Table of Contents What is the DOM? Selecting DOM Elements Event Listeners Adding Event Listeners Common Event Types Removing Event Listeners DOM Manipulation Changing Element Content Modifying Element Attributes Adding and Removing Elements Conclusion 1. What is the DOM? The DOM is a tree-like representation of the HTML document. Each node in the tree represents an element, attribute, or piece of text. JavaScript can interact with the DOM to dynamically change the content, structure, and style of a web page. For example, consider the following HTML: DOM Example Hello, World! Change Text In this example, the DOM tree would have a root node (), with child nodes for and . The element contains an element and a element. 2. Selecting DOM Elements Before you can manipulate the DOM or attach event listeners, you need to select the DOM elements you want to work with. JavaScript provides several methods for selecting elements: document.getElementById(id): Selects an element by its id attribute. document.querySelector(selector): Selects the first element that matches a CSS selector. document.querySelectorAll(selector): Selects all elements that match a CSS selector. For example, to select the element with the id of title, you can use: const titleElement = document.getElementById('title'); Or, using querySelector: const titleElement = document.querySelector('#title'); 3. Event Listeners Event listeners are functions that wait for a specific event to occur on a DOM element, such as a click, mouseover, or keypress. When the event occurs, the event listener executes a callback function. Adding Event Listeners To add an event listener to an element, you can use the addEventListener method: element.addEventListener(eventType, callbackFunction); For example, let's add an event listener to the button in our HTML that changes the text of the element when clicked: const changeTextButton = document.getElementById('changeText'); const titleElement = document.getElementById('title'); changeTextButton.addEventListener('click', function() { titleElement.textContent = 'Text Changed!'; }); In this example, when the button is clicked, the text content of the element is changed to "Text Changed!". Common Event Types Here are some common event types you might use: click: Occurs when an element is clicked. mouseover: Occurs when the mouse pointer is moved over an element. mouseout: Occurs when the mouse pointer is moved out of an element. keydown: Occurs when a key is pressed down. keyup: Occurs when a key is released. submit: Occurs when a form is submitted. Removing Event Listeners You can also remove an event listener using the removeEventListener method. To do this, you need to pass the same event type and callback function that was used when adding the event listener. element.removeEventListener(eventType, callbackFunction); For example, let's remove the event listener we added earlier: function changeText() { titleElement.textContent = 'Text Changed!'; } changeTextButton.addEventListener('click', changeText); // Later, to remove the event listener changeTextButton.removeEventListener('click', changeText); 4. DOM Manipulation DOM manipulation involves changing the content, structure, or style of a web page dynamically using JavaScript. Let's explore some common DOM manipulation techniques. Changing Element Content You can change the content of an element using properties like textContent and innerHTML. textContent: Sets or returns the text content of an element. innerHTML: Sets or returns the HTML content of an element. For example, to change the text content of the element: titleElement.textContent = 'New Title'; Or, to change the HTML content: titleElement.innerHTML = 'New Title'; Modifying Element Attributes You can modify element attributes using methods like setAttribute and getAttribute. setAttribute(name, value):

Feb 28, 2025 - 19:19

How to Work with the DOM: Event Listeners and Manipulation

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, where each object corresponds to a part of the document, such as elements, attributes, and text. JavaScript can interact with the DOM to dynamically change the content, structure, and style of a web page.

If you're a developer or just starting out.
I recommend signing up for our free newsletter 'ACE Dev' .
It gets delivered to your inbox and includes actionable steps and helpful resources.
Join us now

In this blog post, we'll explore two fundamental aspects of working with the DOM: event listeners and DOM manipulation. We'll cover how to attach event listeners to DOM elements to respond to user interactions and how to manipulate the DOM to dynamically update the content and appearance of a web page.

What is the DOM?
Selecting DOM Elements
Event Listeners
- Adding Event Listeners
- Common Event Types
- Removing Event Listeners
DOM Manipulation
- Changing Element Content
- Modifying Element Attributes
- Adding and Removing Elements
Conclusion

1. What is the DOM?

The DOM is a tree-like representation of the HTML document. Each node in the tree represents an element, attribute, or piece of text. JavaScript can interact with the DOM to dynamically change the content, structure, and style of a web page.

For example, consider the following HTML:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>DOM Example<span class="nt">


     id="title">Hello, World!
     id="changeText">Change Text

In this example, the DOM tree would have a root node (), with child nodes for and . The element contains an

element and a