Retour aux articles
Thursday, January 16, 20258 vues1

Manipulating the DOM: Making Your Site Interactive with JavaScript

Mike Codeur

JavaScript

In web development, making your site interactive is essential for providing an enriching user experience. One of the most effective ways to achieve this is by manipulating the Document Object Model (DOM) with JavaScript. In this article, we will explore what the DOM is and how you can use JavaScript to interact with the HTML elements on your page. Ready to bring your site to life? Let's go!

What is the DOM?

The DOM is a structural representation of an HTML document. It allows programming languages like JavaScript to access and manipulate the content, structure, and style of the page. In other words, the DOM transforms your HTML code into a tree of objects that you can control with JavaScript.

Each HTML element is a node in this tree, and you can select, modify, or remove them as needed.

Interacting with the DOM in JavaScript

JavaScript offers several methods for interacting with the DOM. One of the most common is document.querySelector, which allows you to select a specific HTML element using a CSS selector. Let's see how this works.

Example: Modifying the Text or Styles of an Element

Imagine you have the following HTML code:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulating the DOM</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 id="title">Welcome to my site!</h1>
    <button id="changeText">Change Text</button>

    <script src="script.js"></script>
</body>
</html>

Now, here’s the JavaScript code in script.js to modify the title text and add a CSS class:

JSX
// Select the button by its ID
const button = document.getElementById('changeText');

// Add a click event to the button
button.addEventListener('click', () => {
    // Select the title by its ID
    const title = document.querySelector('#title');

    // Modify the title text
    title.textContent = 'Thank you for visiting my site!';

    // Add a CSS class to change the style
    title.classList.add('highlight');
});

Explanation of the Code

  1. Selecting the Element: We use document.getElementById to select the button. This allows us to add a click event.
  2. Listening for the Event: When the user clicks the button, we execute a function.
  3. Modifying the Text: We select the title using document.querySelector and change its text content with textContent.
  4. Changing the Style: We add a CSS class (highlight) to the title, which changes its appearance based on the style defined in the <style> tag.

Conclusion

Manipulating the DOM with JavaScript is an essential skill for any web developer looking to create interactive sites. With document.querySelector and other methods, you can easily modify the content and style of your HTML elements. Feel free to experiment with different elements and styles to make your site even more dynamic and engaging!

So, what are you waiting for? Put this knowledge into practice and start transforming your web pages today!

Abonnes-toi à la NewsLetter

Apprends les meilleures pratiques pour devenir un développeur web moderne (JavaScript / React / Next).

Gagner sa vie grâce au code
Devenir développeur Freelance
+35 000 développeurs déjà inscrits.

Accès instantané. Aucune carte de crédit requise.

Rejoins +35 000 développeurs déjà inscrits.