DOM Manipulation in JavaScript

3 min readFeb 16, 2024

In the realm of web development, Dynamic HTML (DHTML) plays a pivotal role in crafting engaging and interactive user experiences. At the core of DHTML lies Document Object Model (DOM) manipulation, a technique that empowers developers to access and modify HTML elements dynamically using JavaScript. Understanding DOM manipulation is essential for creating responsive web applications that seamlessly respond to user actions and input. In this article, we’ll explore the fundamentals of DOM manipulation, along with practical examples demonstrating how to access and modify HTML elements with JavaScript.

What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML document as a tree of objects, where each node corresponds to an HTML element, attribute, or text within the document. The DOM provides a structured representation of the document, enabling dynamic access and manipulation of its content through scripting languages like JavaScript.

Accessing HTML Elements

JavaScript provides various methods for accessing HTML elements within the DOM, allowing developers to retrieve elements based on their IDs, classes, tags, or other attributes. Here are some common methods for accessing elements:

getElementById(): Retrieves an element by its unique ID.
getElementsByClassName(): Returns a collection of elements with the specified class name.
getElementsByTagName(): Retrieves a collection of elements with the specified tag name.
querySelector(): Returns the first element that matches a specified CSS selector.
querySelectorAll(): Returns a static NodeList representing a list of elements that match the specified group of selectors.

Let’s delve into examples to illustrate these methods:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
</head>
<body>
    <div id="container">
        <h1>Welcome to DOM Manipulation</h1>
        <p class="message">This is a paragraph.</p>
        <p class="message">This is another paragraph.</p>
        <button id="btn">Click Me</button>
    </div>
  <script>
      // Accessing elements
      let heading = document.getElementById('container');
      let paragraphs = document.getElementsByClassName('message');
      let button = document.querySelector('#btn');
  </script>
</body>
</html>

In this example, we’re accessing elements by their IDs, classes, and tag names using various DOM methods.

Modifying HTML Elements

Once we’ve accessed HTML elements, we can dynamically modify their content, attributes, or styles using JavaScript. Here are some common manipulations:

Changing Text Content: Modify the text content of an element.
Changing HTML Content: Update the HTML content of an element.
Changing Attributes: Modify attributes such as src, href, class, etc.
Changing Styles: Update CSS styles dynamically.

Let’s see these manipulations in action:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Welcome to DOM Manipulation</h1>
        <p class="message">This is a paragraph.</p>
        <p class="message">This is another paragraph.</p>
        <button id="btn">Click Me</button>
    </div>
<script>
        // Modifying elements
        heading.textContent = "DOM Manipulation Example";
        paragraphs[0].innerHTML = "This paragraph has been modified.";
        button.setAttribute('disabled', true);
        button.classList.add('highlight');
    </script>
</body>
</html>

In this example, we’ve changed the text content of the heading, modified the HTML content of the first paragraph, disabled the button, and added a CSS class to highlight it.

Conclusion

DOM manipulation is a fundamental aspect of web development, enabling developers to create dynamic and interactive web applications. By understanding how to access and modify HTML elements using JavaScript, developers can enhance user experiences and build responsive interfaces that seamlessly respond to user interactions. Mastery of DOM manipulation empowers developers to harness the full potential of web technologies, unlocking endless possibilities for creating compelling web experiences.

Looking for Javascript Opportunities:

Promote Yourself on GetJSJobs:

https://getjsjobs.com — Reverse Job Board for Javascript Developers