Accès au DOM

DOM : Document Object Model – représentation en mémoire de la page html.

Identifier un élément du DOM

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.
Exemples en lignes 11, 18 et 19
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.
Exemple en lignes 9 et 17

Parcourir le DOM

Le code javascript accède à une variable document qui représente la racine du DOM.
On peut également atteindre directement document.body qui représente la partie <body> de la page.

On peut parcourir les éléments contenus dans 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…

Atteindre directement un élément

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

en ligne 1, on atteint la balise <ul> et on stocke cette référence dans node_ul pour la suite,
en ligne 3, on initialise un compteur,
en ligne 4, on lance une boucle parcourant les éléments enfants de node_ul, donc les enfants de la balise <ul>, donc les balises <li>,
en ligne 6, donc pour chaque 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.

Autres possibilités

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

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();