Le contrôle du DOM par le JavaScript

Document Object Model = lors du chargement d’une page web, le navigateur crée un “arbre d’objets” appelé DOM, avec chaque objet possédant des propriétés, des méthodes, des événements. Les élements à la base de l’arbre sont : la balise racine<html> >> la balise <head> >> les balises <title>, <meta charset=”utf-8”>, <link rel=”stylesheet” href="">,… >> la balise <body> >> les balises <h1>, <div>, <p>, <span>, <ol>, <li>, <header>, <footer>…

Le JavaScript fonctionne conjointement avec le HTML et le CSS.

La DOM HTML est une API (Application Programming Interface) pour JavaScript, qui peut :

modifier, ajouter, supprimer des éléments HTML

modifier, ajouter, supprimer leurs attributs

modifier, ajouter, supprimer les styles CSS

réagir aux événements HTML

modifier, ajouter, supprimer les événements HTML

📌

Pour aller plus loin : https://www.w3schools.com/whatis/whatis_htmldom.asp voir cours 03 - HTML/CSS

Le JavaScript est intégré au fichier HTML grâce à la balise <script>, à laquelle il est possible de passer directement du code JavaScript ou bien de lier un fichier JavaScript avec l’attribut src.

BP : séparer les rôles et ressources —> on met le script JavaScript dans son propre fichier (souvent dans un répertoire dédié).

<script src="js/script.js"></script>

L’appel du script peut être fait dans le <head> ou tout à la fin, juste avant la fermeture du </body> : le choix est fait selon quand on a besoin du script.

BP : mieux vaut appeler le script à la fin, pour ne pas ralentir le chargement de la page web.

⚠️

Il est possible d’appeler plusieurs fichiers JavaScript mais attention à l’ordre : la moindre erreur entrainera l’arrêt de la lecture du fichier.

BP : garder la console du navigateur ouverte tout le temps, pour suivre les erreurs au fil de l’eau.

Propriétés et méthodes accessibles

L’accès à un élément HTML avec JavaScript se fait par son id, son tag name (sa balise associée), sa class name, son sélecteur CSS ou sa collection d’objets.

Les principales propriétés sont accessibles avec document. suivi de l’élément concerné (head, title, body…).

Les principales méthodes sont accessibles avec document. suivi de la méthode concernée :

Lecture :

document.getElementByID();
document.getElementsByTagName();
document.getElementsByClassName();
document.querySelector();
document.querySelectorAll();
// exemples de collection d'objets : document.images ou document.links

Ecriture

document.write();
document.createElement();
document.createAttribute();
document.createTextNode();

Une fois l’élément récupéré, il possède des propriétés et de méthodes qui lui sont propres, telles que :

// exemples de proprietes
unElement.id;
unElement.value;
unElement.attributes;
unElement.innerText;
unElement.innerHTML;

unElement.firstElementChild;
unElement.lastElementChild;
unElement.nextElementSibling;
unElement.previousElementSibling;
unElement.parentElement;

// exemples de methodes
// -- lecture
unElement.getAttribute();
unElement.hasAttribute();
unElement.hasAttributes();
unElement.focus();
unElement.getElementsByTagName();
unElement.querySelector();

// -- ecriture
unElement.insertAdjacentElement();
unElement.setAttribute();
unElement.appendChild();
unElement.replaceChild();
unElement.removeChild();
unElement.removeAttribute();

// -- autre
unElement.focus();

ℹ️

JQuery propose d’autres sélecteurs avec une syntaxe plus facile (voir module 04 - Jquery).

Objet racine d’une page web

Le “document” fait partie d’un objet encore plus grand : “window”. Il possède des fonctions comme alert() ou prompt() et permet d’accéder à d’autres objets :

“console” ~ log(), clear()

“history” ~ back(), forward(), go()

“location” ~ href

Quelques exemples :

// modifier des elements
document.title = "Un beau titre de document";
document.getElementsByTagName("h1")[0].innerText = "Un titre principal";
document.getElementById("un-id").innerHTML = "du texte";

// creer un element
let une_div = document.createElement("div");

// modifier le style d'un element
une_div.style.backgroundColor = "lightblue";

// ajout de l'element juste cree au body
document.body.appendChild(une_div);

// autre facon de modifier un element
une_div.innerHTML += "<br><button>un boutton</button><br>";

// creer une pop-up
alert("Je suis une pop-up !");

Événements

Une fonction peut être appelée lorsqu’un événement se produit, parce que le navigateur ou l’utilisateur fait quelque chose.

Un événement concerne un élément HTML. Le JavaScript réagit à cet événement.

Principaux événements :

onchange : un élément HTML a été modifié

onclick : l’utilisateur a cliqué sur un élément HTML

onmouseover : l’utilisateur passe sa souris sur un élément HTML

onmouseout : l’utilisateur sort sa souris d’un élément HTML

onkeydown : l’utilisateur appuie sur une touche du clavier

onload : le navigateur a fini de charger la page

⚙

Une liste plus complète d’événements : https://www.w3schools.com/jsref/dom_obj_event.asp

On parle de “s’abonner à un événement” lorsqu’on lie du code JavaScript pour réagir à un événement.

Il est possible d’intégrer du code JavaScript directement dans une balise HTML :

// modifier le texte affiché h1
<h1 onclick="this.innerHTML = 'Texte changé !'">Clique sur le texte ?</h1>

// modifier le texte de la balise p juste après
<button onclick="document.getElementById('demo').innerHTML=Date()">
	Quelle heure est-il?
</button>
<p id="demo"></p>

BP : On range son code !! On préfère mettre le code JavaScript dans des fonctions (et d’ailleurs les fonctions dans un script externe) et appeler des fonctions dans le fichier HTML.

// mieux : code dans fonctions
<h1 onclick=changementTexte(this)>Clique sur le texte ?</h1>

<button onclick="afficheDate('demo')">
	Quelle heure est-il?
</button>
<p id="demo"></p>

<script>
function changementTexte(obj) {
	obj.innerHTML = "Texte changé !";
}
function afficheDate(zone) {
	document.getElementById(zone).innerHTML=Date();
}
</script>

Il est possible d’assigner un événement dans le code JavaScript :

en utilisant la DOM HTML : unElement.evenement = fonctionAExecuter();
—> peu utilisé

avec une méthode écouteur d’événement, qui permet d’ajouter un événement et de lui spécifier à quel moment il arrive et à quelle méthode il est lié : unElement.addEventListener("evenement", fonctionAExecuter);

// changer la couleur de fond de la page
// - utilisation d'une méthode anonyme

// un bouton
<button id="test"> Cliquer pour changer la couleur de fond</button>

// V1 pas jolie
<script>
    document.getElementById("test").addEventListener('click',
        () => {
        let fond = document.getElementsByTagName("body")[0];
        function aleatoire255() {
            return Math.floor(Math.random() * 256);
        }
        function choixCouleur() {
            let red = aleatoire255();
            let green = aleatoire255();
            let blue = aleatoire255();
            return "rgb("+red+","+green+","+blue+")";
        }
            Math.floor(Math.random() * 256);
        console.log(choixCouleur());
        fond.style.background = choixCouleur(); //"rgb(255,45,255)"
        })
</script>

// V2 optimisée
<script>
    function aleatoire255() {
        return Math.floor(Math.random() * 256);
    }
    document.getElementById("test").addEventListener('click',
        () => {
        let fond = document.getElementsByTagName("body")[0];

        fond.style.background = "rgb("+aleatoire255()+","+aleatoire255()+","+aleatoire255()+")"; 
        })
</script>

ℹ️

BP : utiliser une fonction anonyme si on n’a pas besoin de la réutiliser plus tard. Attention : ce qui est dedans n’existe que dans son contexte donc on ne crée pas de fonctions à l’intérieur.

📌

Pour aller plus loin : https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events

Bonnes pratiques en vrac

Faire une fonction d’initialisation (init()) où l’on crée les éléments dont on a besoin, qui sera appelée au début du programme et à chaque rechargement de la page.
- exemples : la date et l’heure se mettent à jour, le focus revient directement dans le premier champs de saisie…

Plutôt que de créer des balises avec les méthodes createElement(balise) et appendChild(element), il est plus rapide et lisible d’utiliser unElement.innerHTML += 'chaine de caracteres comprenant les balises HTLM'

Les balises ne prennent pas la même place sur la page :
~ div : prend toute la longueur de la page (générique)
~ p : avec un padding top et bottom (saut de ligne)
~ span : prend l’espace minimal pour afficher son contenu (le +petit conteneur)

Bonus

// BONUS : supprimer l'element sur lequel on clique
// - mieux avec une alert de verification avant suppression

obj.addEventListener("click", supprimer);

function supprimer(event) {
// fonction qui supprime le li sur lequel on clique
// - ici le param n'est pas obligatoire, mais il augmente la 
//   lisibilité et la maintenabilité
    let obj= event.currentTarget.childNodes[0].textContent;
    event.currentTarget.remove();
}