// BLOG

JavaScript - Manipulation du DOM

Le DOM est une interface de programmation qui est une représentation du HTML d'une page web et qui permet d'accéder aux éléments de cette page web et de les modifier avec le langage JavaScript. Voyons comment ...

Rédigé le 22.06.2020

Par Gilles Vauvarin

JavaScript DOM

Document Object Model

Le DOM est une interface de programmation qui est une représentation du HTML d'une page web et qui permet d'accéder aux éléments de cette page web et de les modifier avec le langage JavaScript.

Récupérer un élément

// Par l'ID de l'élément
var monElement = document.getElementById('monId');

// Par un selecteur CSS, le premier est retourné ou tous (All)
var monElement = document.querySelector('.maClass');
var monElement = document.querySelectorAll('.maClass');

// Ces deux méthodes retournent un objet Element

Récupérer le contenu de l'élément

// Par l'ID de l'élément
var monElement = document.getElementById('monId');

// Par un selecteur CSS, le premier est retourné ou tous (All)
var monElement = document.querySelector('.maClass');
var monElement = document.querySelectorAll('.maClass');

// Ces deux méthodes retournent un objet Element

Ajouter ou éditer les attributs de l'élément

// Récupère le contenu text de monElement balises comprises
monElement.innerHTML;

// Récupère le contenu text de monElement balises comprises 
// et balises de monElement comprises
monElement.outerHTML;

// Récupère le contenu text de monElement balises NON comprises
monElement.textContent

Création et insertion d'un nouvel l'élément

/* Cela se fait en 3 étapes :*/

// 1- Créer le nouvel élément
var nouvElement = createElement('div');

// 2- Ajouter des attributs au nouvel élément
nouvElement.setAttribute('class','maClass');

// 3- Insérer le nouvel élément à l'endroit voulu dans le DOM
// ici comme dernier enfant de monElement
monElement.appendChild(nouvElement);

Brancher un écouteur d'événement sur un élément

/* Cela se fait en 3 étapes :*/

// 1- Cibler l'élément
var targetElement = document.getElementById('monId');

// 2- Définir la fonction à executer avec l'objet event en paramètre
function maFonction(event) {
    var targetValue = event.currentTarget.value;
    console.log(event);
}

// 3- Ajouter l'event listener sur l'élément ciblé
// ici la cible est targetElement
targetElement.addEventListener('click',maFonction);