CLI

JS DOM manipulation

sandesh yele's photo
sandesh yele
·

3 min read

JavaScript DOM manipulation is a fundamental skill for any web developer. The Document Object Model (DOM) is an interface that represents the structure of a web page. By manipulating the DOM, you can dynamically change the content, structure, and style of a web page without reloading it. This blog will walk you through the basics of DOM manipulation, key methods, and some practical examples to get you started.

Understanding the DOM

The DOM is a tree-like structure where each node represents a part of the document. Nodes can be elements, attributes, or text content. Here's a simple example of HTML and its corresponding DOM structure:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

DOM Tree

  • html

    • head

      • title

    • body

      • h1

      • p

Selecting Elements

To manipulate the DOM, you first need to select the elements you want to change. JavaScript provides several methods for this:

  1. getElementById: Selects an element by its ID.

  2. getElementsByClassName: Selects elements by their class name.

  3. getElementsByTagName: Selects elements by their tag name.

  4. querySelector: Selects the first element that matches a CSS selector.

  5. querySelectorAll: Selects all elements that match a CSS selector.

Example

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation</title>
</head>
<body>
    <div id="main">
        <h1 class="title">Hello, World!</h1>
        <p>This is a paragraph.</p>
    </div>

    <script>
        // Selecting elements
        const mainDiv = document.getElementById('main');
        const title = document.querySelector('.title');
        const paragraphs = document.getElementsByTagName('p');

        console.log(mainDiv); // <div id="main">...</div>
        console.log(title); // <h1 class="title">Hello, World!</h1>
        console.log(paragraphs); // HTMLCollection [ <p> ]
    </script>
</body>
</html>

Modifying Content

Once you've selected an element, you can modify its content using properties like innerHTML, textContent, and innerText.

  • innerHTML: Sets or gets the HTML content of an element.

  • textContent: Sets or gets the text content of an element.

  • innerText: Similar to textContent, but it also respects styling such as display: none.

Example

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation</title>
</head>
<body>
    <h1 id="header">Original Title</h1>
    <p id="paragraph">Original Paragraph</p>

    <script>
        // Modifying content
        const header = document.getElementById('header');
        const paragraph = document.getElementById('paragraph');

        header.innerHTML = 'Updated Title';
        paragraph.textContent = 'Updated Paragraph';

        console.log(header.innerHTML); // Updated Title
        console.log(paragraph.textContent); // Updated Paragraph
    </script>
</body>
</html>

Changing Styles

You can dynamically change the styles of elements using the style property or by adding/removing CSS classes.

Example

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="paragraph">This is a paragraph.</p>

    <script>
        // Changing styles
        const paragraph = document.getElementById('paragraph');

        // Directly using style property
        paragraph.style.color = 'blue';
        paragraph.style.fontSize = '20px';

        // Using CSS classes
        paragraph.classList.add('highlight');

        console.log(paragraph.style.color); // blue
        console.log(paragraph.style.fontSize); // 20px
        console.log(paragraph.classList.contains('highlight')); // true
    </script>
</body>
</html>

Adding and Removing Elements

You can create, append, and remove elements dynamically using methods like createElement, appendChild, and removeChild.

Example

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation</title>
</head>
<body>
    <div id="container"></div>

    <script>
        // Creating new elements
        const container = document.getElementById('container');
        const newParagraph = document.createElement('p');
        newParagraph.textContent = 'This is a new paragraph.';

        // Appending the new element
        container.appendChild(newParagraph);

        // Removing an element
        const oldParagraph = document.querySelector('p');
        container.removeChild(oldParagraph);

        console.log(container.innerHTML); // <p>This is a new paragraph.</p>
    </script>
</body>
</html>

Event Handling

Interacting with the DOM often involves handling user events like clicks, input changes, and form submissions. You can add event listeners to elements using the addEventListener method.

Example

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation</title>
</head>
<body>
    <button id="myButton">Click Me!</button>
    <p id="message"></p>

    <script>
        // Adding an event listener
        const button = document.getElementById('myButton');
        const message = document.getElementById('message');

        button.addEventListener('click', () => {
            message.textContent = 'Button was clicked!';
        });

        console.log(button); // <button id="myButton">Click Me!</button>
    </script>
</body>
</html>
DOM