JAVASCRIPT > les évènements dans le DOM

Lecture du contenu HTML d’un élément

let contents = myElement.innerHTML;

Cela vous permet de regarder le balisage HTML des nœuds de contenu de l’élément.

Note : Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l’élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d’origine.

Remplacement du contenu d’un élément

Définir la valeur de innerHTML vous permet de remplacer aisément le contenu existant d’un élément par un nouveau contenu.

Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l’attribut body du document.

document.body.innerHTML = "";

Cet exemple récupère le balisage HTML actuel du document et remplace les caractères "<" par l’entité HTML "& lt;", convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément <pre>. Puis, la valeur de innerHTML est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.

document.documentElement.innerHTML = "<pre>" +
         document.documentElement.innerHTML.replace(/</g,"&lt;") +
            "</pre>";

Considérations de sécurité

Cependant, il existe des moyens d’exécuter JavaScript sans utiliser les éléments <script>, donc il existe toujours un risque de sécurité chaque fois que vous utilisez innerHTML pour définir des chaînes sur lesquelles vous n’avez aucun contrôle. Par exemple :

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // affiche l'alerte

Pour cette raison, il est recommandé de ne pas utiliser innerHTML pour insérer du texte brut ; à la place, utilisez Node.textContent. Cela n’analyse pas le contenu passé en HTML, mais l’insère à la place en tant que texte brut.

Attention : Si votre projet est soumis à une vérification de sécurité, l’utilisation de innerHTML entraînera probablement le rejet de votre code. Par exemple, si vous utilisez innerHTML dans une extension de navigateur et soumettez l’extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.

Exemple

Cet exemple utilise innerHTML pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.

JavaScript

function log(msg) {
  var logElem = document.querySelector(".log")
  var time = new Date()
  var timeStr = time.toLocaleTimeString()
  logElem.innerHTML += timeStr + ": " + msg + "<br/>"
}
log("Logging mouse events inside this container...");

La fonction log() crée la sortie du journal en récupérant l’heure actuelle à partir d’un objet Date en utilisant toLocaleTimeString () et en créant une chaîne avec l’horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe "log".

Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur MouseEvent (tels que mousedown (en-US), click (en-US) et mouseenter (en-US)) :

function logEvent(event) {
  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
            event.clientX + ", " + event.clientY + "</em>";
  log(msg);
}

Alors, nous utilisons ceci comme un gestionnaire d’évènements pour un certain nombre d’évènements de souris sur la boîte qui contient notre journal.

var boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

HTML

Le HTML est assez simple pour notre exemple.

<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div>

Le <div> avec la classe "box" est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le <div> dont la classe est "log" est le conteneur pour le texte du journal lui-même.

Résultat

Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.