đ©âđ« JS IntermĂ©diaire 01.1 - Introduction Ă la manipulation du DOM
â ïž Avant de commencer cette quĂȘte, tu dois avoir terminĂ© les quĂȘtes suivantes :
Introduction
Dans les quĂȘtes prĂ©cĂ©dentes, tu as dĂ©couvert les bases de Javascript; nous avons parlĂ© de la syntaxe, des variables, des types de donnĂ©es, des conditions, des fonctions, des tableaux, des objets et des boucles.
Jusqu'à présent, nous avons surtout travaillé avec une console. Ce qui est assez ennuyeux, n'est-ce pas ?
Il est maintenant temps d'apprendre à manipuler les éléments HTML en utilisant Javascript.
Commençons!
đ€ A la fin de cette quĂȘte, tu seras capable de
- â Comprendre ce qu'est le DOM
- â Faire des changements mineurs aux Ă©lĂ©ments HTML en utilisant Javascript
đ€·ââïž Qu'est-ce que le DOM?
DOM signifie Document Object Model. C'est une interface utilisée pour manipuler le contenu d'une page HTML. Lorsque ton navigateur analyse ton code HTML et CSS, il crée également une représentation du document sous la forme d'un objet Javascript. Nous utiliserons ce modÚle pour manipuler notre page web.
đ° L'Objet Document?
Pour accéder à cet objet document, nous pouvons utiliser l'objet document fourni automatiquement par notre navigateur.
Va dans ton navigateur web, ouvre une page Google et la console et regardons ce fameux "Document Object".
console.log(document);
Tu devrais voir #document dans la console. C'est notre objet document.
Clique sur le bouton Ă gauche. Que vois-tu ?
Tu devrais voir la page HTML que tu regardes actuellement ! Voici notre "Document Object" rendu graphiquement par le navigateur :
Chaque élément de l'arbre HTML est appelé un noeud. Cet objet document et ses noeuds sont dotés de nombreuses propriétés et méthodes (rappelle-toi que les méthodes sont des fonctions dans les objets). Tu peux trouver la liste de toutes ces méthodes ici:
Description de l'API Document et toutes les propriétés et méthodes disponibles pour l'objet document.
đŻ SĂ©lectionner et modifier des Ă©lĂ©ments HTML
Voyons comment sélectionner un élément du DOM. L'objet document est fourni avec une méthode appelée querySelector.
La mĂ©thode querySelector fonctionne de la mĂȘme maniĂšre qu'un sĂ©lecteur CSS. Entre parenthĂšses, il suffit d'Ă©crire le sĂ©lecteur souhaitĂ©.
const someDivClass = document.querySelector('.my-div');
const someImg = document.querySelector('.my-img');
const someDivId = document.querySelector('#another-div');
const someH1 = document.querySelector('.my-div h1');
Maintenant, nous avons accÚs à toutes les propriétés et méthodes pour cet élément spécifique. Tu peux trouver toutes les propriétés et méthodes disponibles pour l'élément image ici :
L'interface HTMLImageElement représente un élément HTML , fournissant les propriétés et les méthodes utilisées pour manipuler les éléments d'image.
Essayons d'utiliser une des méthodes.
Par exemple, nous pourrions changer la source de l'image en utilisant la propriété src de l'élément image.
myImg.src = "https://placecats.com/200/286";
đŹFais une expĂ©rience
Nous venons de voir comment sélectionner un élément du DOM et modifier l'une de ses propriétés.
Dans l'exemple suivant, ton but est de sélectionner l'élément du DOM img-cat et de changer le src de l'image par autre chose.
!--- index.html
<!DOCTYPE html>
<html>
<head>
<title>Change the img src</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Change the image source!</h1>
<img
src="images/004-happy-cat.jpg"
alt="Happy cat"
class="img-cat"
/>
<script src="index.js"></script>
</body>
</html>
!--- index.js
// your code here
Interagis avec le code !
Ouvre ce codesandbox dans une autre fenĂȘtre pour une meilleure expĂ©rience
Voir la solution
// We create a variable catImage set to our first DOM node that have the class .img-cat
const catImage = document.querySelector('.img-cat');
// We set the source of the image to a new url
catImage.src = "https://placecats.com/200/286";
Bien joué !
InnerHTML
La méthode innerHTML est utilisée pour modifier le contenu d'une balise HTML.
const title = document.querySelector('.title');
title.innerHTML = "Hello, Bob!";
Dans cet exemple, nous sélectionnons le h1 avec la classe title, et nous changeons le contenu par Hello, Bob !
đŹFais une expĂ©rience
Maintenant que tu sais comment demander Ă l'utilisateur de taper du texte (prompt), modifier le contenu d'une balise de titre et utiliser template strings (`Hi, I'm, ${name}`); essaye d'Ă©crire un code qui demande Ă l'utilisateur de taper son nom (dans la zone d'invite) et d'afficher "Hello" + son nom sur la page.
!--- index.html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h1 class="title">Hello, World!</h1>
<script src="index.js"></script>
</body>
</html>
!--- index.js
// your code here
Interagis avec le code !
Ouvre ce codesandbox dans une autre fenĂȘtre pour une meilleure expĂ©rience
Voir la solution
// We create a variable userName set to the result of prompt
const userName = prompt("What's your name");
// We create a variable set to the first element that match .title
const title = document.querySelector('.title');
// We replaced what's between the two tag by a template string with userName
title.innerHTML = `Hello, ${userName}`;
D'autres méthodes de sélection des éléments
Tu peux également utiliser document.getElementById ou document.getElementByTagName pour sélectionner des éléments HTML, ils sont également pris en charge par les anciens navigateurs tels qu'Internet Explorer 6 - 7 (ce qui n'est pas le cas de querySelector).
const title = document.getElementById('title');
const heading = document.getElementsByTagName('h1');
đŹFais une expĂ©rience :
En utilisant la documentation, modifie ces propriétés sur les images :
- La largeur devrait ĂȘtre Ă©gale Ă 500
- Alt devrait ĂȘtre Ă©gale Ă "A cute wild bear."
Tu dois utiliser getElementById Ă la place de querySelector.
!--- index.html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Change image properties</h1>
<img src="images/005-bear-image.jpg" alt="Bear Image" id="bear-img" />
<script src="index.js"></script>
</body>
</html>
!--- index.js
const bearImg = document.getElementById("bear-img");
// your code here
Interagis avec le code !
Ouvre ce codesandbox dans une autre fenĂȘtre pour une meilleure expĂ©rience
Voir la solution
const bearImg = document.getElementById("bear-img");
// We change the width and the alt of the image
bearImg.style.width = "500px";
bearImg.alt = "A cute wild bear";
SĂ©lectionner plusieurs Ă©lĂ©ments qui ont la mĂȘme classe/la mĂȘme balise
Si tu utilises document.querySelector, s'il y a plus d'un Ă©lĂ©ment avec le mĂȘme sĂ©lecteur dans le document (ex multiple h1), celui sĂ©lectionnĂ© par dĂ©faut sera la premiĂšre occurrence.
Si tu veux obtenir une liste avec plusieurs éléments, tu peux utiliser document.querySelectorAll.
La méthode collectera tous les éléments qui correspondent à ton sélecteur.
const allHeadings = document.querySelectorAll('h1');
La valeur retournée est de type HTMLCollection. C'est une structure de données qui ressemble aux tableaux. Tu peux utiliser les [] pour accéder à un élément par exemple : allHeadings[0]. Mais d'autres fonctionnalités des tableaux ne sont pas disponibles sur une HTMLCollection, comme les les méthodes push ou pop. Quand tu essaies de travailler sur une collection, vérifie dans la documentation que ce que tu veux faire existe bien.
đŹFais une expĂ©rience
Dans cet exemple, il y a cinq balises d'image avec la mĂȘme image. Dans le fichier JS, tu as un tableau avec cinq images diffĂ©rentes d'ours.
Essaye de sélectionner les 5 img en utilisant querySelectorAll, puis crée une boucle for pour remplacer la propriété src img par les images du tableau.
!--- index.html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Replace Bill Murray's pictures by Bear pictures</h1>
<img src="images/006-fais-une-experience.jpg" />
<img src="images/006-fais-une-experience.jpg" />
<img src="images/006-fais-une-experience.jpg" />
<img src="images/006-fais-une-experience.jpg" />
<img src="images/006-fais-une-experience.jpg" />
<script src="index.js"></script>
</body>
</html>
!--- index.js
const bearsPictures = [
"https://placebear.com/500/279",
"https://placebear.com/500/280",
"https://placebear.com/500/300",
"https://placebear.com/500/302",
"https://placebear.com/500/305"
];
// your code here
Interagis avec le code !
Ouvre ce codesandbox dans une autre fenĂȘtre pour une meilleure expĂ©rience
Voir la solution
const bearsPictures = [
"https://placebear.com/500/279",
"https://placebear.com/500/280",
"https://placebear.com/500/300",
"https://placebear.com/500/302",
"https://placebear.com/500/305",
];
// We create a variable set to the array with all element that match the selector img
const images = document.querySelectorAll('img');
// We loop as many time as we have img elements
for (let i = 0; i < images.length; i++) {
// For each loop turn we change the current image for the corresponding image in the array
images[i].src = bearsPictures[i];
}
đ Ressources
Ressource officielle sur la manipulation de DOM
PrĂȘt Ă poursuivre ton voyage dans la manipulation de DOM ?
Si tu es prĂȘt, tu peux passer Ă la prochaine quĂȘte
Ressources partagĂ©es sur cette quĂȘte
- Si vous préférez voir une explication en vidéo comme moi et en plus en français, il vous suffit tout simplement de cliquer sur ce lienhttps://www.youtube.com/watch?v=W1neKsWdEgA&t=374s
- Tout en français et trÚs clair : un véritable MUST !https://nouvelle-techno.fr/actualites/manipuler-le-dom-en-javascript
- explication simple du DOMhttps://www.youtube.com/watch?v=_1fem_5X0Ko
- une vidéo sur le DOMhttps://www.youtube.com/watch?v=UBIfdObb9cY
- Nouveau lien pour remplacer la deuxiĂšme suggestion.https://nouvelle-techno.fr/articles/9-debuter-en-javascript-manipuler-le-document-dom