L'interface Element

Maintenant que nous avons savons sélectionner et récupérer les éléments, nous allons voir comment les manipuler. Les éléments DOM sont de plusieurs types et leurs propriétés changent en fonction de cela.

Le texte des éléments

La propriété innerText

On peut récupérer le texte d'un élément avec la propriété innerText des éléments :

const h1 = document.querySelector('h1')
const titleText = h1.innerText
console.log(titleText) // #
// Introduction au DOM

Cette propriété récupère tout le texte de l'élément, même le texte des éléments qui sont imbriqués :

const sidebarText = document.querySelector('.aside').innerText
console.log(sidebarText) /*
                           "Sur cette page :
                           Table of Contents for current page
                           Le DOM : Document Object Model
                           L'objet document
                           Récupérer les éléments du DOM
                           document.querySelector() et document.querySelectorAll()
                           L'interface Element
                           Le texte des éléments
                           La propriété innerHTML
                           Récupérer la valeur d'un champ d'entrée utilisateur (input)
                           Un mot sur les types checkbox et radio
                           Les événements"
                        ​ */

Il est possible de changer le texte facilement avec cette propriété :

const h1 = document.querySelector('h1')
h1.innerText = 'Nouveau texte sans intérêt'

Si ce code est exécuté sur une page en cours (qui a une balise h1), le texte sera remplacé.

La propriété textContent

La propriété textContent est similaire, à 2 nuances près :

• Elle va retourner tout le texte, même celui qui n'est pas visible par l'utilisateur, comme ceux dans les éléments <script> ou dans les éléments avec display: none
• Elle va garder le formatage et les espaces blancs

La propriété innerHTML

La propriété innerHTML (attention à la casse : HTML est tout en majuscule) des éléments permet de retourner et de modifier le contenu de l'élément.

const h1 = document.querySelector('h1')
const inH1 = h1.innerHTML

console.log(inH1) // <a href="#introduction-au-dom" class="header-anchor">#</a> Introduction au DOM

On peut affecter une nouvelle valeur à cette propriété, et comme pour innerText, le résultat sera visible immmédiatement. La différence est qu'on peut y mettre du HTML et qu'il sera interprété comme tel.

Voici un exemple :

const h1 = document.querySelector('h1')
h1.innerHTML = 'Je peux mettre du <em>HTML</em> !'

Il existe d'autres moyens d'insérer de nouveaux éléments, de les remplacer et de les effacer que d'utiliser innerHTML, nous le verrons.