• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/1/20

Modifiez le DOM

Log in or subscribe for free to enjoy all this course has to offer!

Maintenant que l'on sait comment accéder aux éléments du DOM, nous allons apprendre à les modifier !

Modifiez le contenu d'un élément

Pour commencer, voyons déjà les propriétés permettant de modifier directement le contenu de notre élément. Les deux principales sont :  innerHTML  et  textContent .   

innerHTML  demande à ce que vous entriez du texte représentant un contenu HTML. Par exemple :  "<p>Voici un exemple de contenu pour <strong>innerHTML</strong></p>" .

La propriété   textContent , quant à elle, demande un simple texte qui ne sera pas interprété comme étant du HTML. Si on reprend l'exemple du dessus, le mot innerHTML ne sera pas en gras, et les balises HTML seront visibles comme le reste du texte.

Par exemple, avec le code JavaScript suivant :

let elt = document.getElementById('main');
elt.innerHTML = "<ul><li>Elément 1</li><li>Elément 2</li></ul>";

l'élément qui a l'id 'main' aura un nouveau contenu ; le HTML deviendra donc :

<div id="main">
    <ul>
        <li>Elément 1</li>
        <li>Elément 2</li>
    </ul>
</div>

Modifiez des classes

Il est aussi possible d'accéder directement à la liste des classes d'un élément avec la propriété  classList .

Cette propriété  classList  fournit aussi une série de fonctions permettant de modifier cette liste de classes. En voici quelques-unes : 

  • add(<string>, [<string>, ...] )  (doc) : ajoute la ou les classes spécifiées ;

  • remove(<string>, [<string>, ...] )  (doc) : supprime la ou les classes spécifiées ;

  • contains(<string> )  (doc) : vérifie si la classe spécifiée est contenue par cet élément ;

  • replace(<old>, <new> )  (doc) : remplace l'ancienne classe par la nouvelle classe.

Voici quelques exemples :

elt.classList.add("nouvelleClasse");    // Ajoute la classe nouvelleClasse à l'élément
elt.classList.remove("nouvelleClasse"); // Supprime la classe nouvelleClasse que l'on venait d'ajouter
elt.classList.contains("nouvelleClasse");   // Retournera false car on vient de la supprimer
elt.classList.replace("oldClass", "newClass"): // Remplacera oldClass par newClass si oldClass était présente sur l'élément

Changez les styles d'un élément

Avec la propriété  style , vous pouvez récupérer et modifier les différents styles d'un élément.

style  est un objet qui a une propriété pour chaque style existant. Par exemple, pour modifier la couleur d'arrière-plan d'un élément, vous ferez :  element.style.backgroundColor = '#000';

Voici quelques exemples :

elt.style.color = "#fff";      // Change la couleur du texte de l'élément à blanche
elt.style.backgroundColor = "#000"; // Change la couleur de fond de l'élément en noir
elt.style.fontWeight = "bold"; // Met le texte de l'élément en gras

Modifiez les attributs

Pour définir ou remplacer les attributs d'un élément, vous pouvez utiliser la fonction  setAttribute .

element.setAttribute(<name>, <value> )  (doc) prend en paramètres le nom de l'attribut et sa valeur et ne retourne rien.

 Voici quelques exemples avec  elt  faisant référence à un élément de type  input  :

elt.setAttribute("type", "password");   // Change le type de l'input en un type password
elt.setAttribute("name", "my-password");    // Change le nom de l'input en my-password
elt.getAttribute("name");               // Retourne my-password

Créez de nouveaux éléments

Modifier des éléments c'est bien, mais si on ne pouvait pas en créer des nouveaux, on serait bien limité.

C'est pourquoi la fonction  document.createElement  existe. Elle va nous permettre de créer un nouvel élément du type spécifié, puis nous pourrons l'insérer dans notre DOM.

document.createElement(<tag>)  (doc) prend en paramètre le nom de la balise de notre élément et nous renvoie l'élément nouvellement créé.

const newElt = document.createElement("div");

Ajoutez des enfants

Il existe plusieurs façons d'ajouter un élément dans notre page. La plus connue est  appendChild. Cette fonction permet d'ajouter un élément à la liste des enfants du parent depuis lequel la fonction est appelée.

parentNode.appendChild(<element>)   (doc) prend en paramètre l'élément à ajouter en tant qu'enfant. L'élément depuis lequel on appelle cette fonction devient donc le parent de notre élément.

Voici un exemple :

const newElt = document.createElement("div");
let elt = document.getElementById("main");

elt.appendChild(newElt);

Avec le code ci-dessus, nous venons de créer un nouvel élément de type  div , mais qui n'est pas encore rattaché au DOM. Nous avons ensuite récupéré l'élément ayant pour id  main . Enfin, nous avons ajouté notre nouvel élément dans les enfants de l'élément  #main .

Supprimez et remplacez des éléments

Il existe les fonctions  removeChild  et  replaceChild , afin de respectivement supprimer et remplacer un élément.

parentNode.removeChild(<element>)  (doc) prend en paramètre l'élément à supprimer du parent et retourne cet élément.

parentNode.replaceChild(<newElement>, <oldElement>)  (doc) prend en paramètres le nouvel élément ainsi que l'élément à remplacer, et retourne ce dernier.

Voici quelques exemples :

const newElt = document.createElement("div");
let elt = document.getElementById("main");
elt.appendChild(newElt);

elt.removeChild(newElt);    // Supprime l'élément newElt de l'élément elt
elt.replaceChild(document.createElement("article"), newElt);    // Remplace l'élément newElt par un nouvel élément de type article

Pratiquez !

Il est temps de s'exercer à modifier le contenu des éléments du DOM !

Entrainez-vous dans l'éditeur de code Javascript de cet exercice CodePen à accomplir les tâches ci-dessous :

  1. Créez un nouvel élément de type paragraphe  p  ;

  2. Ajoutez votre nouvel élément dans l'élément ayant pour id  main  ;

  3. Ajoutez ce contenu HTML dans l'élément que vous avez créé lors de la première tâche :  Mon <strong>grand</strong> contenu  ;

  4. Ajoutez la classe important à l'élément que vous avez créé lors de la première tâche ;

  5.  Votre élément est maintenant rouge, mais on voudrait qu'il soit vert. Modifiez les styles de votre élément (en JavaScript) pour qu'il soit vert.

En résumé

Dans ce chapitre, vous avez appris :

  • À modifier le contenu et à manipuler un élément ;

  • À changer les styles et à définir les d'un élément ;

  • À  créer de nouveaux éléments et à ajouter des enfants à un élément ;

  • À supprimer et remplacer un élément par un autre.

Nous savons maintenant comment modifier le DOM. Il ne nous reste plus qu'à apprendre comment interagir avec l'utilisateur, via la souris ou encore des formulaires.

Example of certificate of achievement
Example of certificate of achievement