BRE03

JavaScript : Interactions avec le DOM

Introduction

Pour pouvoir commencer à dynamiser le HTML nous allons avoir besoin d’interagir avec le DOM de la page. Pour pouvoir sélectionner du HTML, le modifier, écouter les évènements.

Sélectionner des éléments du DOM

Avant tout nous allons avoir besoin de sélectionner des éléments dans le DOM, pour pouvoir les modifier, en récupérer les informations ou écouter leurs évènements.

getElementById

Pour récupérer un élément du DOM en utilisant son id :

<section id="yep">

</section>

let yep = document.getElementById("yep");

getElementsByClassName

Pour récupérer tous les éléments qui ont une même class :

<article class="product">

</article>

<article class="product">

</article>

let productList = document.getElementsByClassName("product");

querySelector

Pour utiliser directement un sélecteur CSS et récupérer le premier élément correspondant

<ul>
	<li>
		Salade
	</li>
	<li>
		Tomate
	</li>
	<li>
		Oignon
	</li>
</ul>

let tomate = document.querySelector("ul li:nth-of-type(2)");

querySelectorAll

<ul>
	<li>
		Salade
	</li>
	<li>
		Tomate
	</li>
	<li>
		Oignon
	</li>
</ul>

let ingredients = document.querySelectorAll("ul li:not(:first-of-type)"); 

// [Tomate, Oignon]

Modifier le DOM

style

Pour modifier directement le style d’un élément :

let box = document.getElementById("box");

box.style.backgroundColor = "red";

classList

L’attribut classList permet de modifier la liste des classes présentes sur un élément :

let box = document.getElementById("box");
box.classList.add("open"); // box aura la classe open
box.classList.remove("open"); // box n'aura plus la classe open
box.classList.toggle("open"); // si la classe est là ça l'enlève, si elle n'y est pas ça la rajoute

id

L’attribut id permet de lire ou modifier l’id d’un élément :

let box = document.querySelector("ul li:first-of-type");
let id = box.id; // box 
box.id = "box1"; // box1

getAttribute() / setAttribute()

Vous pouvez utiliser getAttribute() pour récupérer un attribut. Vous pouvez utiliser setAttribute() pour modifier un attribut.

let box = document.getElementById("box");
box.setAttribute("titi", "toto");
let titi = box.getAttribute("titi"); // toto

<section id="box" titi="toto">
</section>

createElement

Pour créer un nouvel élément HTML :

let ul = document.createElement("ul");
let li = document.createElement("li");

appendChild

Pour ajouter un élément dans un autre élément (à la fin):

<ul id="list">

</ul>

let ul = document.getElementById("list");

let li = document.createElement("li");

ul.appendChild(li);

createTextNode

Pour ajouter du contenu texte :

let li = document.createElement("li");
let txt = document.createTextNode("Salade");

li.appendChild(txt);

insertBefore

Pour insérer un élément avant un autre

<article id="post">
	
	<p>
	
	</p>
<article>

let p = document.querySelector("#post p");

let header = document.createElement("header");

p.insertBefore(header);

Les events

addEventListener

Ajouter un listener sur un event, ça veut dire surveiller si un évènement se produit et si c’est le cas déclencher une action précise.

<button id="btn">Click Me!</button>

Pour lui désigner l’action qu’il va devoir faire, on utilise une fonction qui n’a pas de nom. On appelle ça une fonction anonyme.

let btn = document.getElementById("btn");

btn.addEventListener("click", function(event){
	alert("On a cliqué sur le bouton!");
});

Mais on peut aussi choisir d’attacher des évènements à de multiples éléments, dans ce cas si on a besoin de pouvoir cibler précisément l’élément qui a reçu l’évènement, on va utiliser event.target :

let buttons = document.querySelectorAll("button");

for(let i = 0; i < buttons.length; i++)
{
    buttons[i].addEventListener('click', function(event){
        let button = event.target;
        
        console.log(button);
    })
}

Si vous avez besoin d’annuler le comportement par défaut d’un élément (par exemple éviter à un lien de vous faire changer de page avant d’avoir lancé une animation) on utilise event.preventDefault():

let links = document.querySelectorAll("a");

for(let i = 0; i < links.length; i++)
{
    links[i].addEventListener('click', function(event){
        event.preventDefault();
        
        window.alert("Vous avez des modifications non sauvegardées !");
    })
}

Quelques events

DomContentLoaded

L’event DOMContentLoaded de la window vous indique que le contenu de votre page a bien été chargé, par prudence, placez tout le reste de votre code dedans :

window.addEventListener("DOMContentLoaded", function(){
	// tout le reste de mon script
});

click

L’event click vous signale que l’utilisateur a cliqué sur l’élément.

Keyboard events

On peut également capter des évenements du clavier :

document.addEventListener("keydown", function(event){
	console.log(event.code); // affichera le nom de la touche appuyée
});

Mouse events

Les évenements de la souris que l’on peut capter :

mousedown
mouseup
mousemov
mouseover
mouseout
click
dblclick
contextmenu

Exercices de manipulation du DOM

Sujet des exercices

Les formulaires

Documentation des forms

Documentation des inputs

Évènements de formulaires

submit

Lorsqu’un formulaire a été soumis (clic sur un <input type="submit"> ou <button type="submit"> contenu dans la balise <form>).

let form = document.getElementById("myFormId");

form.addEventListener('submit', function(event){
    event.preventDefault(); // j'empeche le rechargement de la page
    // je fais mes trucs
});

change

Lors que la valeur d’un controle de formulaire (input, select, textearea) change :

let input = document.getElementById("myInputId");

input.addEventListener('change', function(event){
    console.log(input.value); // ici j'affiche la valeur du champ
});

Exercices de manipulation de formulaires

Sujet des exercices