Manipulation DOM : sélection et manipulation des éléments DOM

Introduction au DOM

Le Document Object Model (DOM) est un concept crucial pour le développement Web. Il sert d'interface de programmation qui permet aux développeurs d'interagir avec et de modifier la structure, le style et le contenu d'une page Web. Lorsqu'une page Web est chargée dans le navigateur, le document HTML est converti en DOM, une structure arborescente où chaque nœud représente un élément, un attribut ou un texte. Cette structure permet aux développeurs d'accéder et de manipuler des parties de la page de manière dynamique, rendant l'expérience Web plus interactive et engageante.

Pour les débutants et ceux qui ne connaissent pas le DOM, considérez-le comme le plan d'une maison. Tout comme vous pouvez réorganiser les meubles ou peindre les murs d'une maison, le DOM vous permet de modifier le contenu et le style d'une page Web après son chargement.

Sélection d'éléments

Avant de pouvoir manipuler le DOM, vous devez sélectionner les éléments avec lesquels vous souhaitez travailler. JavaScript propose plusieurs méthodes de sélection d'éléments, vous permettant d'interagir avec différentes parties de la page Web. Voici un aperçu de quelques méthodes courantes :

1. Sélection d'un élément par ID

La méthode getElementById est l’un des moyens les plus simples de sélectionner un seul élément. Il renvoie l'élément qui correspond à l'ID spécifié.

// Selecting an element by ID
const heading = document.getElementById('heading');

Dans cet exemple, head fera désormais référence à l'élément avec l'ID de head. Vous pouvez utiliser cette référence pour manipuler davantage l'élément.

2. Sélection d'éléments par nom de classe

Pour sélectionner plusieurs éléments avec la même classe, vous pouvez utiliser la méthode getElementsByClassName. Cette méthode renvoie une HTMLCollection d'éléments en direct.

// Selecting elements by class name
const items = document.getElementsByClassName('item');

La variable items contiendra désormais une collection de tous les éléments portant le nom de classe item. Cette méthode est particulièrement utile lorsque vous devez appliquer la même action à plusieurs éléments.

3. Sélection d'éléments à l'aide d'un sélecteur CSS

Les méthodes querySelector et querySelectorAll vous permettent de sélectionner des éléments à l'aide de sélecteurs CSS. Ces méthodes sont polyvalentes et peuvent être utilisées pour cibler des éléments par nom de balise, classe, ID ou tout autre sélecteur CSS valide.

// Selecting a single element using a CSS selector
const button = document.querySelector('button');

// Selecting multiple elements using a CSS selector
const listItems = document.querySelectorAll('li');

querySelector sélectionne le premier élément qui correspond au sélecteur, tandis que querySelectorAll sélectionne tous les éléments correspondants et renvoie une NodeList, qui est similaire à un tableau.

Manipulation des éléments

Une fois que vous avez sélectionné un élément, vous pouvez le manipuler pour modifier son contenu, ses attributs et ses styles. Cela vous permet de créer des pages Web dynamiques qui répondent aux interactions des utilisateurs ou à d'autres événements.

1. Modification du contenu du texte

La propriété textContent vous permet de modifier le texte au sein d'un élément. Ceci est utile pour mettre à jour le contenu de manière dynamique en fonction des entrées de l'utilisateur ou d'autres conditions.

// Changing text content
heading.textContent = 'Hello, World!';

Dans cet exemple, le texte à l'intérieur de l'élément référencé par le titre sera mis à jour en "Hello, World!".

2. Modification d'un attribut

La méthode setAttribute vous permet de modifier les attributs d'un élément, tels que src, href, alt ou désactivé.

// Changing an attribute
button.setAttribute('disabled', true);

Ici, le bouton est désactivé en définissant l'attribut désactivé sur true. Cela peut être utilisé pour empêcher l'interaction de l'utilisateur jusqu'à ce qu'une certaine condition soit remplie.

3. Changer de style

La propriété style vous permet de modifier les styles CSS en ligne d'un élément. Vous pouvez modifier des propriétés telles que la couleur, backgroundColor, fontSize, etc.

// Changing styles
heading.style.color = 'blue';

Dans cet exemple, la couleur du texte dans l'élément de titre est modifiée en bleu.

Création et suppression d'éléments

En plus de modifier des éléments existants, vous pouvez créer de nouveaux éléments et les ajouter au DOM, ou supprimer des éléments qui ne sont plus nécessaires.

1. Création d'un nouvel élément

Vous pouvez créer un nouvel élément en utilisant la méthode createElement. Une fois créé, vous pouvez définir ses propriétés et l'ajouter à un élément existant dans le DOM.

// Creating a new element
const newElement = document.createElement('p');
newElement.textContent = 'This is a new paragraph.';
document.body.appendChild(newElement);

Dans cet exemple, un nouveau

est créé, son contenu textuel est défini et il est ajouté à la fin de l'élément élément.

2. Supprimer un élément

Pour supprimer un élément du DOM, vous pouvez utiliser la méthode Remove. Ceci est particulièrement utile pour gérer dynamiquement le contenu de votre page.

// Removing an element
const oldElement = document.getElementById('old-element');
oldElement.remove();

Ici, l'élément avec l'ID old-element est supprimé du DOM, le supprimant ainsi de la page Web.

Exemple concret : liste de tâches

Pour voir ces concepts en action, créons une application simple de liste de tâches. Cet exemple montrera comment sélectionner et manipuler des éléments DOM dans un scénario réel.

HTML Structure

First, let's create the HTML structure for our To-Do List.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To-Do List</title>
</head>
<body>
  <h1 id="heading">To-Do List</h1>
  <ul id="todo-list"></ul>
  <input type="text" id="new-todo" placeholder="New to-do">
  <button id="add-todo">Add To-Do</button>
</body>
</html>

In this structure:

• We have a heading (

  ) with an ID of heading.

• An unordered list (
  ) with an ID of todo-list, where our to-do items will be displayed.
  • An input field for adding new to-do items, with an ID of new-todo.
  • A button with an ID of add-todo to add new items to the list.

  JavaScript for Interactivity

  Next, we'll add some JavaScript to make the To-Do List interactive.
  

  <script>
    // Selecting elements
    const todoList = document.getElementById('todo-list');
    const newTodoInput = document.getElementById('new-todo');
    const addTodoButton = document.getElementById('add-todo');
  
    // Adding a new to-do item
    addTodoButton.addEventListener('click', () => {
      const newTodoText = newTodoInput.value;
      if (newTodoText === '') return; // Prevent adding empty to-do items
  
      // Create a new list item
      const newTodoItem = document.createElement('li');
      newTodoItem.textContent = newTodoText;
  
      // Append the new item to the list
      todoList.appendChild(newTodoItem);
  
      // Clear the input field
      newTodoInput.value = '';
    });
  </script>
  

  Explanation:

  1. Selecting Elements: We begin by selecting the necessary elements using their IDs.
  2. Event Listener: We add a click event listener to the "Add To-Do" button. When clicked, the event listener function is triggered.
  3. Input Validation: Inside the function, we first check if the input field is empty to prevent adding empty to-do items.
  4. Creating a New Element: If the input is not empty, we create a new
  5. element and set its text content to the value entered in the input field.
  6. Appending the New Item: The new
  7. is then appended to the existing
     element.
     • Clearing the Input Field: Finally, the input field is cleared, ready for the next to-do item.

  This simple application demonstrates the power of DOM manipulation in creating interactive and dynamic web pages.

  Conclusion

  DOM manipulation is a fundamental skill for any web developer. By understanding how to select and manipulate DOM elements, you can create web pages that are not only static but also responsive to user interactions. The examples provided in this article serve as a foundation for more advanced topics, such as event handling, animations, and dynamic content loading.

  By practicing these techniques and applying them to real-world scenarios, you'll gain a deeper understanding of how the web works and be well on your way to mastering front-end development.

  Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!