la programmation

Manipulation HTML via JavaScript

Dernière mise à jour: 24/02/2024
3 minutes de lecture

La manipulation des éléments d’une page HTML via JavaScript est une compétence fondamentale pour les développeurs web. Cela permet de créer des pages dynamiques et interactives en réagissant aux actions de l’utilisateur ou en mettant à jour le contenu de la page en fonction des données fournies par le serveur.

Articles similaires

Il existe plusieurs façons de manipuler les éléments HTML en utilisant JavaScript, allant de la simple modification du texte à des interactions plus complexes telles que le déplacement ou la suppression d’éléments. Voici quelques-unes des techniques les plus couramment utilisées :

  1. Sélectionner des éléments :
    Pour manipuler un élément HTML, vous devez d’abord le sélectionner. Cela peut être fait en utilisant des méthodes telles que document.getElementById, document.getElementsByClassName, document.getElementsByTagName, ou des sélecteurs CSS avec document.querySelector et document.querySelectorAll.

  2. Modifier le contenu :
    Une fois que vous avez sélectionné un élément, vous pouvez modifier son contenu en accédant à sa propriété innerHTML ou innerText. Par exemple, pour changer le texte d’un élément, vous pouvez faire element.innerHTML = "nouveau texte";.

  3. Modifier les attributs :
    Vous pouvez également modifier les attributs HTML d’un élément en accédant à ses propriétés, telles que element.setAttribute pour ajouter un nouvel attribut ou modifier la valeur d’un attribut existant.

  4. Ajouter ou supprimer des classes CSS :
    Les classes CSS peuvent être ajoutées ou supprimées d’un élément en utilisant les méthodes element.classList.add et element.classList.remove.

  5. Manipuler le style CSS :
    Vous pouvez également modifier le style CSS d’un élément en accédant à sa propriété style et en définissant les différentes propriétés CSS. Par exemple, element.style.color = "red"; changera la couleur du texte de l’élément en rouge.

  6. Ajouter ou supprimer des éléments :
    Vous pouvez créer de nouveaux éléments HTML en utilisant document.createElement, puis les ajouter à la page en utilisant des méthodes telles que appendChild ou insertBefore. De même, vous pouvez supprimer des éléments en utilisant removeChild.

  7. Écouter les événements :
    L’une des utilisations les plus puissantes de JavaScript est de réagir aux événements déclenchés par l’utilisateur, tels que les clics de souris, les pressions de touches, etc. Cela peut être réalisé en utilisant addEventListener pour attacher des gestionnaires d’événements à des éléments HTML.

Voici un exemple simple de manipulation d’éléments HTML en utilisant JavaScript :

html
html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation d'éléments HTML avec JavaScripttitle>
    <style>
        .highlight {
            background-color: yellow;
        }
    style>
head>
<body>
    <h1 id="titre">Titre de la pageh1>
    <p id="paragraphe">Ceci est un paragraphe.p>
    <button id="bouton">Cliquez icibutton>

    <script>
        // Sélectionner des éléments
        const titre = document.getElementById('titre');
        const paragraphe = document.getElementById('paragraphe');
        const bouton = document.getElementById('bouton');

        // Modifier le contenu
        titre.innerHTML = "Nouveau titre";

        // Modifier les attributs
        bouton.setAttribute('disabled', true);

        // Ajouter ou supprimer des classes CSS
        paragraphe.classList.add('highlight');

        // Manipuler le style CSS
        bouton.style.backgroundColor = "blue";

        // Ajouter un gestionnaire d'événements
        bouton.addEventListener('click', () => {
            alert('Le bouton a été cliqué !');
        });
    script>
body>
html>

Ce code HTML crée une page avec un titre, un paragraphe et un bouton. En utilisant JavaScript, nous avons ensuite modifié le contenu, ajouté un attribut, ajouté une classe CSS, modifié le style CSS et ajouté un gestionnaire d’événements pour le bouton. Cela illustre quelques-unes des nombreuses façons dont les éléments HTML peuvent être manipulés à l’aide de JavaScript pour créer des expériences web interactives.

Plus de connaissances

Bien sûr, plongeons plus en profondeur dans la manipulation des éléments HTML avec JavaScript.

Sélection des éléments HTML :

  1. getElementById :
    Cette méthode permet de sélectionner un élément en fonction de son identifiant unique.

    javascript
    const element = document.getElementById('monId');

  2. getElementsByClassName :
    Sélectionne tous les éléments qui ont une classe spécifique.

    javascript
    const elements = document.getElementsByClassName('maClasse');

  3. getElementsByTagName :
    Sélectionne tous les éléments qui ont le nom de balise spécifié.

    javascript
    const elements = document.getElementsByTagName('div');

  4. querySelector :
    Sélectionne le premier élément qui correspond au sélecteur CSS spécifié.

    javascript
    const element = document.querySelector('#monId .maClasse');

  5. querySelectorAll :
    Sélectionne tous les éléments qui correspondent au sélecteur CSS spécifié.

    javascript
    const elements = document.querySelectorAll('div.maClasse');

Modification du contenu et des attributs :

  1. innerHTML :
    Permet de définir ou d’obtenir le contenu HTML d’un élément.

    javascript
    element.innerHTML = "
    Nouveau contenu
    "    ;

  2. innerText :
    Modifie ou récupère le texte contenu dans un élément, sans interpréter le HTML.

    javascript
    element.innerText = "Nouveau texte";

  3. setAttribute :
    Ajoute un nouvel attribut ou met à jour la valeur d’un attribut existant.

    javascript
    element.setAttribute('title', 'Nouveau titre');

Manipulation des classes CSS :

  1. classList.add :
    Ajoute une classe à un élément.

    javascript
    element.classList.add('maClasse');

  2. classList.remove :
    Supprime une classe d’un élément.

    javascript
    element.classList.remove('maClasse');

  3. classList.toggle :
    Ajoute la classe si elle n’est pas présente, la supprime si elle est présente.

    javascript
    element.classList.toggle('maClasse');

Manipulation du style CSS :

  1. style.property :
    Permet de modifier directement les propriétés de style d’un élément.

    javascript
    element.style.color = "red";

Ajout et suppression d’éléments :

  1. createElement :
    Crée un nouvel élément HTML.

    javascript
    const newElement = document.createElement('div');

  2. appendChild :
    Ajoute un élément comme dernier enfant d’un autre élément.

    javascript
    parentElement.appendChild(newElement);

  3. insertBefore :
    Insère un élément avant un élément spécifié dans le même parent.

    javascript
    parentElement.insertBefore(newElement, referenceElement);

  4. removeChild :
    Supprime un enfant d’un élément.

    javascript
    parentElement.removeChild(childElement);

Écoute des événements :

  1. addEventListener :
    Permet de réagir à des événements sur un élément spécifique.

    javascript
    element.addEventListener('click', maFonction);

  2. removeEventListener :
    Supprime un gestionnaire d’événements qui a été ajouté avec addEventListener.

    javascript
    element.removeEventListener('click', maFonction);

En utilisant ces techniques, vous pouvez créer des applications web interactives et dynamiques en manipulant les éléments HTML avec JavaScript.

Dernière mise à jour: 24/02/2024
3 minutes de lecture
Bouton retour en haut de la page