Basic DOM Manipulation in JavaScript

The Document Object Model (DOM) allows JavaScript to interact with the HTML structure of a web page. In this tutorial, we will explore basic techniques for selecting and manipulating elements in the DOM.

1. Selecting Elements

JavaScript provides several methods to select elements in the DOM. Understanding these methods is crucial for effective DOM manipulation:

document.getElementById(): Selects a single element by its unique ID. This method is fast and commonly used when you know the ID of the element.
document.querySelector(): Selects the first element that matches a specified CSS selector. This method is versatile, allowing you to use complex selectors.
document.querySelectorAll(): Selects all elements that match a specified CSS selector and returns a NodeList. You can iterate through this list to manipulate each element.

Example of Selecting Elements

Here’s a simple example demonstrating how to select elements:

<!DOCTYPE html>
<html>
<head>
    <title>Element Selection Example</title>
</head>
<body>
    <h1 id="main-heading">Hello World</h1>
    <p class="description">This is a description paragraph.</p>
    <button id="change-text-btn">Change Text</button>

    <script>
        // Selecting elements
        const heading = document.getElementById('main-heading');
        const description = document.querySelector('.description');

        console.log(heading); // Logs the heading element
        console.log(description); // Logs the description paragraph
    </script>
</body>
</html>

Using querySelectorAll

In addition to selecting a single element, you can select multiple elements. For example, if you want to select all paragraphs:

<script>
    // Selecting all paragraph elements
    const paragraphs = document.querySelectorAll('p');
    paragraphs.forEach((para) => {
        console.log(para.textContent); // Logs the text of each paragraph
    });
</script>

2. Modifying Element Content and Style

Once you have selected an element, you can modify its content and style. This allows you to create dynamic and interactive web pages:

To update text content, use the textContent property. This replaces the existing text within the element.
To add or remove classes, use classList.add() and classList.remove(). This is useful for applying CSS styles conditionally.
To change CSS properties, you can use the style property, allowing you to manipulate individual CSS rules.

Example of Modifying Content and Style

In the following example, clicking the button changes the heading text and style:

<!DOCTYPE html>
<html>
<head>
    <title>Modify Content and Style</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <h1 id="main-heading">Original Heading</h1>
    <button id="change-style-btn">Change Style</button>

    <script>
        const heading = document.getElementById('main-heading');
        const button = document.getElementById('change-style-btn');

        button.onclick = function() {
            heading.textContent = 'Heading Changed!';
            heading.classList.add('highlight'); // Adding a class to change style
            heading.style.backgroundColor = 'yellow'; // Changing the background color
        };
    </script>
</body>
</html>

Explanation of the Code

In this example:

We select the heading and button elements using their IDs.
We define an onclick event for the button, which updates the heading's text content and adds a CSS class to change its style.
Additionally, we change the background color of the heading using the style property.

3. Example: Changing Multiple Elements

Sometimes you may want to apply changes to multiple elements at once. Here’s how you can do that:

<!DOCTYPE html>
<html>
<head>
    <title>Change Multiple Elements</title>
    <style>
        .changed {
            color: green;
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <button id="change-items-btn">Change Items</button>

    <script>
        const items = document.querySelectorAll('.item');
        const button = document.getElementById('change-items-btn');

        button.onclick = function() {
            items.forEach(item => {
                item.classList.add('changed'); // Adding a class to change style for each item
                item.textContent = item.textContent + ' - Updated!'; // Modifying text
            });
        };
    </script>
</body>
</html>

Explanation of the Code

In this example:

We select all elements with the class item.
When the button is clicked, we iterate over each item, adding the changed class to apply new styles and modifying the text.

Previous Next