JavaScript et DOM

Utilisation du JavaScript dans une page web

Il y a plusieurs façons d'inclure du JavaScript dans une page web :

Directement dans la balise <script>: Vous pouvez écrire du code JavaScript directement à l'intérieur d'une balise <script> dans votre fichier HTML. Voici comment faire :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple de JavaScript</title>
    </head>
    <body>
        <h1>Bonjour le monde!</h1>
        
        <script>
            console.log("Bonjour depuis JavaScript!");
        </script>
    </body>
</html>

Attention ⚠

La balise <script> doit toujours être placée avant la fermeture de la balise </body> pour s'assurer que le DOM est complètement chargé avant l'exécution du script.

En liant un fichier JavaScript externe : Il est possible et souvent préférable de séparer le code JavaScript dans un fichier externe. Vous pouvez créer un fichier .js (par exemple, script.js) et le lier à votre fichier HTML comme suit :

index.htmlscript.js

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple de JavaScript Externe</title>
    </head>
    <body>
        <h1>Bonjour le monde!</h1>
        <script src="script.js"></script>
    </body>
</html>

javascript

console.log("Bonjour depuis le fichier JavaScript externe!");

Bien évidemment, il est possible de spécifier plusieurs fichiers JavaScript externes en utilisant plusieurs balises <script>. Par exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple de JavaScript Externe</title>
    </head>
    <body>
        <h1>Bonjour le monde!</h1>
        <script src="script1.js"></script>
        <script src="script2.js"></script>
    </body>
</html>

Information ❗

Les scripts sont exécutés dans l'ordre où ils sont inclus dans le fichier HTML.

Il est également possible d'utiliser la console JavaScript dans la balise <script> pour tester rapidement des morceaux de code.

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple de Console JavaScript</title>
    </head>
    <body>
        <h1>Bonjour le monde!</h1>      
        <script>
            console.log("Ceci est un message dans la console JavaScript.");
        </script>
    </body>
</html>

Introduction au DOM (Document Object Model)

Qu'est-ce que le DOM?

Le DOM (Document Object Model) est une interface de programmation pour les documents HTML et XML. En gros, il représente la structure d'une page web sous forme d'un arbre hiérarchique, où chaque élément HTML est un nœud dans cet arbre. Le DOM permet aux langages de programmation, comme JavaScript, d'accéder et de manipuler le contenu, la structure et le style des pages web de manière dynamique.

Quelques lectures supplémentaires sur le DOM :

Voici un exemple visuel de la structure du DOM pour une page HTML :^[1]

first page meme

Tous les nœuds sont des enfants du nœud racine document. Chaque élément HTML (comme <html>, <head>, <body>, etc.) est représenté comme un nœud dans cet arbre.

Il sera bien évidemment possible de manipuler le DOM avec JavaScript pour modifier le contenu, ajouter ou supprimer des éléments, changer les styles, etc. 🔥

Vous allez voir, ça va être malade ! 😉

Manipulation du DOM avec JavaScript

Plusieurs méthodes sont disponibles pour accéder et manipuler les éléments du DOM avec JavaScript. Durant ce cours et le prochain, nous allons en explorer quelques-unes!

Lecture intéressante sur les méthodes de manipulation du DOM :

W3Schools - HTML DOM Methods

Dans une page web, avec le DOM, l'objet global document représente la page web entière. Vous pouvez utiliser cet objet pour accéder aux éléments HTML et les manipuler.

`getElementById`

La méthode getElementById permet de sélectionner un élément HTML en utilisant son attribut id. Voici un exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple getElementById</title>
    </head>
    <body>
        <h1 id="monTitre">Bonjour le monde!</h1>
        <script>
            let titre = document.getElementById("monTitre");
            titre.innerHTML = "Texte modifié!";
        </script>
    </body>
</html>

Information ❗

innerHTML est une propriété qui permet de modifier le contenu HTML d'un élément. Le contenu est ce qui est entre les balises ouvrantes et fermantes.

`getElementsByClassName`

La méthode getElementsByClassName permet de sélectionner tous les éléments HTML qui partagent une même classe CSS. Le résultat est une liste (tableau) d'éléments. Voici un exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple getElementsByClassName</title>
    </head>
    <body>
        <p class="fruit">Pomme</p>
        <p class="fruit">Banane</p>
        <p class="fruit">Poire</p>
        <script>
            let fruits = document.getElementsByClassName("fruit");
            for (let fruit of fruits) {
                fruit.innerHTML = "Orange";
            }
        </script>
    </body>
</html>

`getElementsByTagName`

La méthode getElementsByTagName permet de sélectionner tous les éléments HTML d'un certain type (balise). Le résultat est une liste (tableau) d'éléments. Voici un exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple getElementsByTagName</title>
    </head>
    <body>
        <h1>Titres</h1>
        <h2>Sous-titres</h2>
        <h3>Autres titres</h3>
        <script>
            let titres = document.getElementsByTagName("h2");
            for (let titre of titres) {
                titre.innerHTML = "Titre modifié";
            }
        </script>
    </body>
</html>

`querySelector` et `querySelectorAll`

Les méthodes querySelector et querySelectorAll permettent de sélectionner des éléments en utilisant des sélecteurs CSS.

querySelector Retourne le premier élément correspondant.

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple querySelector</title>
    </head>
    <body>
        <p class="animal">Chien</p>
        <p class="animal">Chat</p>
        <script>
            let animal = document.querySelector(".animal");
            animal.innerHTML = "Lapin";
        </script>
    </body>
</html>

querySelectorAll Retourne une liste de tous les éléments correspondants.

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple querySelectorAll</title>
    </head>
    <body>
        <p class="animal">Chien</p>
        <p class="animal">Chat</p>
        <script>
            let animaux = document.querySelectorAll(".animal");
            for (let animal of animaux) {
                animal.innerHTML = "Lapin";
            }
        </script>
    </body>
</html>

Truc 💡

Au besoin, n'hésitez pas à vous référer à la documentation suivante : https://www.w3schools.com/css/css_selectors.asp

Exercice - DOM DOM DOM

Vous devez utiliser les fonctions du DOM afin de faire afficher la valeur des éléments suivants dans la console du navigateur :

L'élément avec l'id special.
Tous les éléments avec la classe note.
Tous les éléments <li>.
Le premier élément avec la classe highlight.

Utiliser le fichier suivant comme point de départ.

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exercice DOM</title>
    </head>
    <body>
        <h1 id="special">Titre spécial</h1>
        <p class="note">Note 1</p>
        <p class="note">Note 2</p>
        <ul>
            <li>Élément 1</li>
            <li>Élément 2</li>
            <li>Élément 3</li>
        </ul>
        <div class="highlight">Contenu en surbrillance</div>
        <div class="highlight">Autre contenu en surbrillance</div>
    </body>
</html>

EXTRA : Toujours avec une fonction du DOM, modifier le texte de l'élément avec l'id special pour qu'il affiche "Titre modifié!".

Modification des styles CSS

À l'aide du DOM, il est possible d'accéder au css avec la propriété style. Il peut s'avérer très intéressant de modifier le css de manière dynamique dans notre site web.

La syntaxe sera la suivante : element.style.proprieteCSS = "valeur".

Voici un exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple modification CSS</title>
    </head>
    <body>
        <h1 id="monTitre">Bonjour le monde!</h1>
        <h1 id="monAutreTitre">Bonjour le monde x2!</h1>
        <script>
            let titre = document.getElementById("monTitre");
            titre.style.color = "red";
            titre.style.fontSize = "30px";
        </script>
    </body>
</html>

Ici, il se passe :

On sélectionne l'élément avec l'id monTitre.
On modifie la couleur du texte en rouge avec style.color.
On modifie la taille de la police avec style.fontSize.

L'équivalent en CSS serait :

css

#monTitre {
    color: red;
    font-size: 30px;
}

Truc 💡

Au besoin, n'hésitez pas à vous référer à la documentation suivante : https://www.w3schools.com/js/js_htmldom_css.asp

Modification d'un attribut

Il est possible de modifier la valeur d'un attribut HTML en utilisant element.attributeName = "valeur".

Voici un exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple modification attribut</title>
    </head>
    <body>
        <img id="monImage" src="image1.jpg" alt="Image 1">
        <script>
            let image = document.getElementById("monImage");
            image.src = "image2.jpg";
        </script>
    </body>
</html>

Ici, on modifie l'attribut src de l'élément <img> pour changer l'image affichée.

Il serait également possible de faire la même chose avec l'attribut alt pour changer le texte, par exemple.

Cependant, ce ne sont pas toujours les mêmes noms (ex.: pour les classes, on doit travailler avec classList) Exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple modification class</title>
    </head>
    <body>
        <p id="monParagraphe" class="classe1">Texte du paragraphe</p>
        <script>
            let paragraphe = document.getElementById("monParagraphe");
            paragraphe.classList.add("classe2");
            paragraphe.classList.remove("classe1");
        </script>
    </body>
</html>

Ici, on utilise classList ainsi que les méthodes add et remove permet de gérer les classes de manière dynamique.

Truc 💡

classList est très intéressant pour ajouter ou enlever une classe CSS selon une action.

Par exemple, pour cacher une section si l'utilisateur clique sur un bouton.

Ça ressemble beaucoup à l'accordion que vous avez vu avec Bootstrap.

Ajout d'un élément

Il est possible d'ajouter des éléments HTML dynamiquement en utilisant les méthodes createElement et appendChild. Voici un exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple ajout d'élément</title>
    </head>
    <body>
        <div id="monDiv">
            <p>Paragraphe existant</p>
        </div>
        <script>
            // On crée un nouveau div
            let nouveauDiv = document.createElement("div");
            
            // On lui donne un peu de contenu
            const nouveauContenu = document.createTextNode('Allo tout le monde!');

            // Ajoute le nouveau contenu au div
            nouveauDiv.appendChild(nouveauContenu);
            
            // À partir du div existant, on ajoute le nouveau div
            const divDejaLa = document.getElementById('monDiv');
            document.body.insertBefore(nouveauDiv, divDejaLa);
        </script>
    </body>
</html>

Suppression d'un élément

Il est possible de supprimer des éléments HTML dynamiquement en utilisant la méthode removeChild. Voici un exemple :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple suppression d'élément</title>
    </head>
    <body>
        <div id="monDiv">
            <p id="paragrapheASupprimer">Paragraphe à supprimer</p>
        </div>
        <script>
            // On sélectionne le paragraphe à supprimer
            let paragraphe = document.getElementById("paragrapheASupprimer");
            
            // On supprime le paragraphe du div parent
            paragraphe.parentNode.removeChild(paragraphe);
        </script>   
    </body>
</html>

Interaction avec le navigateur

Le DOM permet également d'interagir avec le navigateur en utilisant des boîtes de dialogue telles que alert, prompt et confirm. Voici un exemple pour chacune de ces boîtes de dialogue :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple boîtes de dialogue</title>
    </head>
    <body>
    <script>
        // Boîte d'alerte
        alert("Ceci est une alerte!");

        // Boîte de prompt
        let nom = prompt("Quel est votre nom?");
        console.log("Bonjour, " + nom + "!");

        // Boîte de confirmation
        let confirmation = confirm("Êtes-vous sûr de vouloir continuer?");
        if (confirmation) {
            console.log("L'utilisateur a confirmé.");
        } else {
            console.log("L'utilisateur a annulé.");
        }
    </script>
    </body>
</html>

Manipulation du temps

Le DOM fournit également des fonctions pour gérer le temps, telles que setTimeout et setInterval. Voici un exemple pour chacune de ces fonctions :

index.html

html

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple manipulation du temps</title>
    </head>
    <body>
    <script>
        // setTimeout : exécute une fonction après un délai spécifié (en millisecondes)
        setTimeout(function() {
            console.log("Ceci est affiché après 2 secondes.");
        }, 2000);   
        // setInterval : exécute une fonction à intervalles réguliers (en millisecondes)
        let compteur = 0;
        let intervalId = setInterval(function() {
            compteur++; 
            console.log("Compteur : " + compteur);
            if (compteur >= 5) {
                clearInterval(intervalId); // Arrête l'intervalle après 5 exécutions
            }   
        }, 1000); // Exécute toutes les secondes
    </script>
    </body>
</html>

Truc 💡

Il existe la fonction clearInterval et clearTimeout pour arrêter les intervalles et les délais si nécessaire.

Exercice récapitulatif - Manipulation du DOM, css et attributs

Créez une page HTML avec les éléments suivants :
- Un titre <h1> avec l'id monTitre.
- Trois paragraphes <p> avec la classe note.
- Une liste non ordonnée <ul> avec trois éléments <li> Représentant différents cours de votre parcours.
- Un div avec la classe highlight.
- Il se peut que vous ailler a ajouter d'autres classes ou id pour faire l'exercice.
Créez un fichier JavaScript externe et liez-le à votre page HTML.
Dans votre fichier JavaScript, utilisez les méthodes du DOM pour :
- Afficher dans la console l'élément avec l'id monTitre.
- Afficher dans la console tous les éléments avec la classe note.
- Afficher dans la console tous les éléments <li>.
- Afficher dans la console le premier élément avec la classe highlight.
- Modifiez le texte de l'élément avec l'id monTitre pour qu'il affiche "Cours en technique de l'informatique".
- Modifiez le style de tous les éléments avec la classe note pour qu'ils aient une couleur de texte bleue, une taille de police de 18 pixels et le texte en gras.
- Ajouter un élément <li> à votre liste avec le nom d'un cours que vous aimeriez suivre à l'avenir.
- Supprimer un élément <li> qui représente un cours que vous avez déjà suivi.
- Afficher avec une alerte l'élément que vous venez de supprimer de votre liste.
- Après 10 secondes, vous devez changer le texte de l'élément avec l'id monTitre pour qu'il affiche "Merci d'avoir visité ma page!".

Rappel - Utilisation de la console du navigateur

Dans cette section, il s'agit simplement de faire un petit rappel sur l'utilisation de la console de votre navigateur web.

Afin d'ouvrir la console, f12 est souvent la touche du clavier utilisé et ce peut importe votre navigateur web.

Sur Chrome : https://developers.google.com/web/tools/chrome-devtools

Sur Firefox : https://firefox-source-docs.mozilla.org/devtools-user/

Sur Edge : https://learn.microsoft.com/en-us/microsoft-edge/devtools/overview

Truc 💡

Je ne vous oblige pas de navigateur pour ce cours, vous prenez celui de votre choix. J'utilise personnellement Edge et cela fonctionne très bien.

Source: https://www.w3schools.com/js/js_htmldom.asp ↩︎

JavaScript et DOM ​

Utilisation du JavaScript dans une page web ​

Introduction au DOM (Document Object Model) ​

Qu'est-ce que le DOM? ​

Manipulation du DOM avec JavaScript ​

getElementById ​

getElementsByClassName ​

getElementsByTagName ​

querySelector et querySelectorAll ​

Exercice - DOM DOM DOM ​

Modification des styles CSS ​

Modification d'un attribut ​

Ajout d'un élément ​

Suppression d'un élément ​

Interaction avec le navigateur ​

Manipulation du temps ​

Exercice récapitulatif - Manipulation du DOM, css et attributs ​

Rappel - Utilisation de la console du navigateur ​

JavaScript et DOM

Utilisation du JavaScript dans une page web

Introduction au DOM (Document Object Model)

Qu'est-ce que le DOM?

Manipulation du DOM avec JavaScript

`getElementById`

`getElementsByClassName`

`getElementsByTagName`

`querySelector` et `querySelectorAll`

Exercice - DOM DOM DOM

Modification des styles CSS

Modification d'un attribut

Ajout d'un élément

Suppression d'un élément

Interaction avec le navigateur

Manipulation du temps

Exercice récapitulatif - Manipulation du DOM, css et attributs

Rappel - Utilisation de la console du navigateur