Document Object Model (DOM)

Last modified: 13 March 2024

1. Introduction to the DOM

The Document Object Model (DOM) is a fundamental concept in web development, enabling dynamic interaction with HTML documents through JavaScript. It represents the webpage's structure as a tree of objects, each corresponding to HTML elements. Developers can manipulate these objects to dynamically update and modify a webpage's content, structure, and style.

2. Understanding the DOM

What is the DOM?

The DOM serves as a programming interface for web documents, representing the document's structure as a tree of objects. These objects correspond to different parts of the document, allowing developers to programmatically manipulate its content, structure, and style.

Document Object

At the top of the DOM hierarchy is the document object, representing the entire HTML document. It serves as the entry point for accessing and manipulating the document's content.

Node

Nodes are the building blocks of the DOM tree, representing elements, attributes, and text in an HTML document.

Element

Elements, a specific type of node, represent HTML tags. They can be accessed and modified through the DOM to dynamically change a webpage's structure and appearance.

3. Basics of the DOM

1. The document Object

The core of the DOM is the document object, providing properties and methods for interacting with the HTML document.

// Example: Accessing the document object
const documentObject = document;

2. document.title

The title property allows developers to retrieve or change the title displayed in the browser tab.

// Example: Changing the title property
document.title = "New Title";

3. document.body

The body property represents the <body> element, providing access to the content within the HTML document's body.

// Example: Accessing the body element
const bodyElement = document.body;

4. Selecting Elements in the DOM

1. document.getElementById()

This method retrieves an element based on its unique ID attribute.

// Example: Selecting an element by ID
const elementById = document.getElementById("uniqueID");

2. document.getElementsByClassName()

Returns a collection of elements with a specified class name.

// Example: Selecting elements by class name
const elementsByClass = document.getElementsByClassName("commonClass");

3. document.getElementsByTagName()

Retrieves a collection of elements with a specified tag name.

// Example: Selecting elements by tag name
const elementsByTag = document.getElementsByTagName("div");

4. document.querySelector()

Selects the first element that matches a specified CSS selector.

// Example: Using querySelector to select the first button element
const buttonElement = document.querySelector("button");

5. document.querySelectorAll()

Similar to querySelector, but returns a NodeList containing all elements that match the specified selector.

// Example: Using querySelectorAll to select all paragraphs with a class
const paragraphs = document.querySelectorAll("p.className");

5. Manipulating HTML Content

1. element.innerHTML

The innerHTML property allows developers to access or modify the HTML content within an element.

// Example: Changing the innerHTML of an element
buttonElement.innerHTML = "Click Me";

2. element.innerText

Retrieves or sets the text content of an element, excluding HTML tags.

// Example: Setting the text content of a paragraph
paragraphElement.innerText = "This is the updated text.";

3. element.textContent

Similar to innerText, the textContent property returns the text content of an element, including all nested elements.

// Example: Getting the text content of a div
const divText = divElement.textContent;

6. Working with Element Attributes

1. element.getAttribute()

Retrieves the value of a specified attribute for an element.

// Example: Getting the value of the 'src' attribute of an image
const srcValue = imageElement.getAttribute("src");

2. element.setAttribute()

Sets the value of a specific attribute for an element.

// Example: Setting the 'alt' attribute of an image
imageElement.setAttribute("alt", "New Alt Text");

3. element.removeAttribute()

Removes a specified attribute from an element.

// Example: Removing the 'disabled' attribute from a button
buttonElement.removeAttribute("disabled");

7. Modifying Styles and Classes

1. element.style

The style property allows access to the inline styles of an element.

// Example: Changing the background color of a div
divElement.style.backgroundColor = "blue";

2. element.classList

The classList property provides methods for adding, removing, and toggling classes on an element.

// Example: Adding a new class to an element
element.classList.add("newClass");

8. DOM Events

What are DOM Events?

DOM events are actions or occurrences that happen in the web browser. These can be triggered by the user, the browser, or even by the script itself. Examples of DOM events include a user clicking a button, pressing a key, resizing the window, or the page finishing loading. JavaScript allows us to capture and respond to these events, providing a way to make our web pages interactive.

Event Handling in JavaScript

To handle events in JavaScript, we use event handlers. Event handlers are functions that are executed in response to a specific event. The most common way to set up an event handler is by using the addEventListener method.

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
    // Code to be executed when the button is clicked
});

In this example, a click event handler is added to a button with the id 'myButton.' When the button is clicked, the provided function is executed.

Types of DOM Events

DOM events can be broadly categorized into three types:

  1. Mouse Events:

    • click: Triggered when the mouse is clicked.

    • mouseover and mouseout: Fired when the mouse enters or exits an element.

    • mousemove: Occurs when the mouse pointer is moved.

  2. Keyboard Events:

    • keydown and keyup: Responds to keyboard key presses and releases.

    • keypress: Triggered when an alphanumeric key is pressed.

  3. Form Events:

    • submit: Occurs when a form is submitted.

    • change: Fired when the value of an input element changes.

Event Object

When an event occurs, an event object is created. This object contains information about the event, such as the type of event, the target element, and additional details. Event objects are automatically passed to the event handler function.

const inputField = document.getElementById('myInput');

inputField.addEventListener('input', function(event) {
    console.log('Input value:', event.target.value);
});

In this example, the event object is used to retrieve and log the value of an input field when it changes.

Event Propagation (Bubbling and Capturing)

Events in the DOM follow a propagation model where they can either bubble up from the target element to the root of the document (bubbling) or go from the root to the target (capturing). Understanding event propagation is essential for managing complex event scenarios.

document.body.addEventListener('click', function() {
    console.log('Document body clicked!');
}, true); // The third parameter 'true' activates the capturing phase

In this case, the click event on the document body will be captured during the capturing phase.

Event Listeners and Event Removal

Event listeners are crucial for handling user interactions in websites. They enable you to respond to events such as clicks, hovers, and keypresses, providing a dynamic and interactive user experience. Event listeners are added to elements using addEventListener, and they can be removed using removeEventListener. This is useful when you want to stop listening for a specific event.

const element = document.getElementById('myElement');
const handleClick = function() {
    // Code to be executed when the element is clicked
};

element.addEventListener('click', handleClick);

// Remove the event listener after a specific condition
element.removeEventListener('click', handleClick);

Types of Event Listeners

JavaScript supports various types of event listeners, each catering to different scenarios. Some common ones include:

  1. Click Event Listener:

    element.addEventListener('click', function() {
    // Code for handling click event
});

  2. Mouseover Event Listener:

    element.addEventListener('mouseover', function() {
    // Code for handling mouseover event
});

  3. Keydown Event Listener:

    document.addEventListener('keydown', function(event) {
    // Code for handling keydown event
});

  4. Submit Event Listener:

    formElement.addEventListener('submit', function(event) {
    // Code for handling form submission event
    event.preventDefault(); // Prevents the default form submission behavior
});

9. Document Fragment

A document fragment is a lightweight container that holds DOM nodes, useful for improving performance when manipulating multiple elements.

// Example: Creating and using a document fragment
const fragment = document.createDocumentFragment();

10. Conclusion

Mastering the Document Object Model is essential for creating dynamic and interactive web applications. By understanding the properties and methods provided by the DOM, developers can build responsive and engaging user interfaces. This comprehensive guide covers the key aspects of the DOM, empowering you to leverage its capabilities in your web development projects. Experiment with the examples provided to deepen your understanding and enhance your skills in working with the DOM.