Home Blog 6 Méthodes fréquentes avec Javascript pour la manipulation du DOM

6 Méthodes fréquentes avec Javascript pour la manipulation du DOM

by Undersun

Bonjour a tous,

Aujourd’hui nous allons parler de manipulation du DOM (Document Object Model).

Si tu ne sais pas c’est quoi, pour faire simple c’est une interface appeler API (Interface de Programmation d’Application en français) pour lire et manipuler nos pages web, jouer avec ses classes. Normalisée par le W3C.

Je vous conseille de lire cet article qui vous expliqueras tres clairement ce que c’est :

https://la-cascade.io/le-dom-cest-quoi-exactement/

Javascript nous permet de rendre dynamique nos sites en manipulant le DOM.

Dans ce billet de blog, nous allons voir 6 methodes souvent utiliser dans le developpement web.

Methodes :

querySelector() est une methode qui sélectionne un element (classe / ID):

const element = document.querySelector('.classe');
const element = document.querySelector('#id');

getElementById() est une methode qui selectionne un ID:

const element = document.getElementById('id');

addEventListener() est une methode qui crée un écouteur d’événements(event listener pour le terme en anglais) sur un élément (pour un clic ou une pression d’une touche du clavier par exemple)

Voyons un exemple du clique qui execute une fonction :

<!DOCTYPE html>
<html>
<body>

<h1> Methode The addEventListener() </h1>

	<p>Exécute une fonction lorsqu'un utilisateur clique sur un bouton :</p>
	<button id="monBouton">Test</button>
	<p id="afficheBonjour">

<script>
	const element = document.getElementById("monBouton");
	element.addEventListener("click", maFonction);

	function maFonction() {
	document.getElementById("afficheBonjour").innerHTML = "bonjour";
	}
</script>
</body>
</html>

Methodes classList :

classList.remove() est une methode qui enleve une classe a l’element:

const element = document.querySelector('.classe').classList.remove('.autre-classe');

classList.add() est une methode qui ajoute une classe a l’element:

const element = document.querySelector('.classe').classList.add('.autre-classe');

classList.toggle() est une methode qui basculent entre les classes d’un element:

const element = document.querySelector('.classe').classList.toggle('.autre-classe');

N’hésitez pas a partager d’autres methodes (et propriété !) que vous utilisez quotidiennement.

You may also like

Leave a Comment