DOM : Document Object Model – représentation en mémoire de la page html.
Prenons une page simple comme :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS dans les balises</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p class="rouge">Blabla, un peu de texte ici.</p>
<p>Et encore du texte là...</p>
<ul id="liste">
<li>Le premier élément d'une liste à puces.</li>
<li>Le deuxième élément de cette même liste.</li>
<li>Et un troisième.</li>
</ul>
<div>
<h2 class="rouge">Un titre contenu dans un bloc standard div</h2>
<p id="texte1">un texte dans le même bloc.</p>
<p>Un texte avec du <b>gras</b> et un <span id="sp1">bloc en ligne standard</span></p>
</div>
<form>
<input name="profession" type="text">
<input type="submit" value="Valider">
</form>
</body>
<script language="javascript" src="script.js"></script>
</html>
En plus des noms des balises html, vous remarquez quelques éléments permettant d'identifier tel ou tel bloc :
id : on ajoute un identifiant à une balise. L'identifiant doit être unique.name : très proche de id. On utilise name '' dans les formulaires.
Exemple ici en ligne 22. Dans ce cas, input permet à l'utilisateur d'écrire quelque chose. Ce quelque chose sera identifié par le nom – name – “profession” qui est la valeur associée à ''name.class : La classe est utilisée pour spécifier un élément de mise en forme CSS. Mais on peut exploiter cet attribut pour identifier une balise particulière. Il arrive sur internet que l'on attribue une classe qui ne correspond à aucune mise en forme et qui ne sert qu'à identifier certains éléments de la page.document qui représente la racine du DOM.document.body qui représente la partie <body> de la page.body grâce à une boucle :
for (let item of document.body.children) {
// la boucle se répète en parcourant les nœuds
// enfants de document.body. À chaque boucle,
// item est un nœud enfant de document.body
}Cette méthode est possible mais peu efficace : le DOM est plein d'éléments qui ne nous servent pas. Si on saute une ligne dans le document html, ce saut de ligne n'apparaît pas dans la page mais on aura un enfant de plus dans le DOM…
La méthode native la plus efficace est d'atteindre un élément par son id.
let node_ul = document.getElementById("liste");
// node_ul représente maintenant le nœud <ul> dont l'id est "liste"
let compteur = 0;
for (let item of node_ul.children){
// parcours des enfants
item.innerHTML = "coucou "+compteur;
compteur ++;
}
Voir dans jsFiddle
<ul> et on stocke cette référence dans node_ul pour la suite,node_ul, donc les enfants de la balise <ul>, donc les balises <li>,item <li>, on modifie le contenu html – le innerHTML – en écrivant "coucou" suivi de la valeur courante du compteur
Le résultat est que le contenu html des <li> est modifié.
Comme un id est unique, getElementById ne doit renvoyé qu'un élément ou rien – si rien, on obtient null.
On peut atteindre des éléments par leur name, leur class, leur tag – c'est à dire leur type de balise. Mais comme plusieurs items peuvent avoir le même nom, la même classe CSS ou le même type de balise, alors les fonctions ci-dessous, ne renvoient pas qu'un élément mais une collection d'éléments, cette collection pouvant être vide.
Voici quelques exemples.
// by name
let items = document.getElementsByName("profession");
console.log(items.length); // renvoie 1
let item = items[0];
// item contient l'unique élément de name = "profession"
// il s'agit du input.
item.value = "peintre"; // changement du contenu de input
// by tag
items = document.getElementsByTagName("p");
console.log(items.length); // renvoie 4, les 4 balises <p>
items[2].style.color = "blue"; // Fait passer le <p> ciblé en bleu
//by class
items = document.getElementsByClassName("rouge");
console.log(items.length); // renvoie 2, les 2 items doté de la classe "rouge"
items[0].style.display = "None"; // Cet élément n'est plus affiché
Voir dans jsFiddle.
jQuery est un module javascript extrêmement utilisé. Tous les sites beaux et animés en JS l'utilisent. C'est un module très léger qui ajoute de grandes fonctionnalités notamment pour sélectionner les éléments de la page.
Pour utiliser jQuery, c'est très simple : il suffit d'ajouter ce lien dans la partie <head> de la page - l'exemple est donné pour une version 3.5.1 de jQuery :
<script src="jquery-3.5.1.min.js"></script>
Le nom de fichier est suivi de min ce qui signifie que le fichier .js a été minifié. Ce n'est pas vraiment une compression bien que l'idée est de réduire la taille. Minifié, c'est enlever tous les caractères inutiles du fichier .js, changer des noms de variables pour les rendre plus courtes… Après cette étape, le fichier .js est plus léger mais quasiment illisible.
Ensuite, jQuery met à disposition des fonctions très utiles. Comme on se retrouve à constamment demander des fonctions jQuery, pour ne pas avoir à écrire jquery tout le temps, on a choisi un raccourci : $. Donc dans un fichier JS, quand vous voyez $, il est presque certain qu'il s'agit de jQuery.
Ci-dessous, un exemple de code rendu très simple par jQuery qui sélectionne tous les éléments <p> et les rend invisibles.
$("p").hide();