Le JavaScript

Manipulation du code HTML (1/2)

Important : Le code HTML manipulé est celui situé dans la mémoire utilisée par le navigateur après la lecture du fichier HTML. L'affichage (à l'écran) est alors modifié mais pas le fichier HTML (situé sur le disque dur)

Le Document Object Model

Le DOM - Document Object Model - permet, via le JavaScript, de modifier le code HTML situé dans la mémoire utilisée par le navigateur.

Rappel. Un document HTML est représenté hiérarchiquement. Ainsi, la balise HTML contient deux éléments enfants : HEAD et BODY qui, à leur tour, contiennent d'autres balises enfants. Chaque zone appartient à une zone ( excepté la première, HTML )

NB : Le navigateur n'a pas de mémoire. Le navigateur n'est qu'un programme. Comme tout programme, il ne dispose que de la mémoire prêtée par l'OS.

En HTML, on parle de balise. En JavaScript-DOM, on parlera d'nœud de type élément, vu comme un objet.

Un objet est comme une voiture.
Une caractéristique (attribut) de la voiture est sa couleur.
Une action qu'on peut appliquer (méthode) à la voiture est avancer.

Un objet peut aussi être une zone HTML.
Une caractéristique (attribut) de la zone HTML est son nom.
Une action qu'on peut appliquer (méthode) à cette zone est de l'afficher ou non.

Un objet informatique est quelque chose qui dispose d'attributs et auquel on peut appliquer des méthodes.

L'objet window

L'objet window représente la fenêtre du navigateur.

Qui dit objet, dit méthode. alert() est le nom d'une méthode de l'objet window qui affiche un message sur la fenêtre du navigateur.

Normalement, on écrit nom_objet.nom_méthode(). Entre le nom de l'objet et celui de la méthode, il existe un point. On écrira donc window.alert(). Toutefois, en JavaScript, le nom de l'objet window est le seul objet implicite, sous entendu. On peut donc aussi écrire simplement alert(). Ce qui est entre parenthèses sont les arguments.

Il existe deux types de variables : globales ou locales. Une variable locale peut avoir le même nom qu'une variable globale ... Cependant, en préfixant par window. le nom de la variable, on accède à la variable globale.

Particularité du JavaScript. Si une variable n'est pas déclarée ( par le mot-clé "var" ), elle est d'office globale.

Naviguer dans le document

L'objet document

L'objet document est un sous-objet de window. Il représente le fichier HTML et plus précisément la balise HTML.

C'est la partie BODY de la page web qui s'affiche dans une fenêtre du navigateur et non l'inverse !
Il est donc normal que l'objet document soit un sous-objet de window.

Les nœuds

Chaque zone est appelée balise (en HTML), élément (en JavaScript) et nœud (en "DOM").

En HTML, une zone est délimitée par un couple de balises et un contenu. En DOM, un nœud de type élément peut avoir comme enfant un nœud de type texte ou un autre nœud de type élément. Et comme une balise (ouvrante) peut contenir des attributs, un nœud de type élément peut contenir un nœud de type attribut.

Principaux types de nœud :

Attention. Le contenu d'une balise peut contenir du texte, une autre balise et du texte.

<p>Il est beau, <strong>gentil</strong> et intelligent.</p>

Soit troix nœuds : un nœud de type texte ("Il est beau, "), un nœud de type élément (<strong>gentil</strong>) et un nœud de type texte (" et intelligent.")

En anglais, "nœud" s'écrit "node"

Voilà, le plus dur du DOM est compris. Maintenant, on va pouvoir s'amuser !

Accéder à un nœud de type élément

getElementById()

Accéder à une balise ayant un attribut id est très facile, il suffit d'appliquer la méthode getElementById() à l'objet document

Quelque connaissance en anglais permet de comprendre. get = obtenir, element = élément (!), by = par, id = abbréviation pour identification. Par tradition, les programmeurs collent les mots et mettent en majuscule la première lettre de chaque mot, sauf pour le premier mot. On obtient donc getElementById, ce qui peut se traduire par "obtient l'élément identifié par". Et, entre les parenthèses l'identifiant.

Exemple : Pour accéder à la balise <p id="result">

Rappel : La valeur de l'attribut id est unique dans tout le fichier HTML. Il n'existe qu'une seule balise dans tout le document (= entre les balises HTML) ayant l'id="result". 

<script>
   var cible = document.getElementById("result");
</script>

Maintenant, dans le code Javascript, "cible" représente la balise <p id="result">

Éditer les éléments HTML

Le JavaScript voit les éléments HTML comme étant des objets, cela veut donc dire que chaque élément HTML possède des propriétés et des méthodes.

getAttribute()

Une balise contient parfois des attributs. Récupérer la valeur d'un attribut est très facile, il suffit d'appliquer la méthode getAttribute() à l'objet représentant la balise.

Exemple : Pour accéder à la valeur de l'attribut href de la balise a identifiée par "lien"
<a id="lien" href="http://www.google.be">vers Google</a> 

<script>
   var balise = document.getElementById("lien");
   var URL = balise.getAttribute("href");
</script>

Maintenant, dans le code Javascript, "URL" vaut "http://www.google.be"

setAttribute()

Plus fort ! Il est possible de modifier la valeur d'un attribut via la méthode setAttribute() où le premier paramètre est le nom de l'attribut à modifier et le second, la valeur de l'attribut. 

<script>
   var balise = document.getElementById("lien");
   balise.setAttribute("href","http://www.pigné.be");
</script>

Maintenant, si l'utilisateur clique sur le lien "vers Google", il arrivera sur le site pigné.be !

Encore plus simple ! Au lieu d'utiliser ces méthodes getAttribute() et setAttribute(), on peut, dans la plupart des cas, utiliser des propriétés ayant comme nom celui de l'attribut concerné. 

<script>
   var balise = document.getElementById("lien");
   var URL = balise.href;
</script>

<script>
   var balise = document.getElementById("lien");
   balise.href="http://www.pigné.be";
</script>

Cela fonctionne lorsque le nom de la propriété/attribut ne correspondant pas à un nom réservé du JavaScript. Deux attributs HTML posent donc problème : for et class. Le nom des propriétés de ces 2 attributs sont : htmlFor et className.

Autre problème. La propriété href ne retourne pas la valeur de l'attribut, mais une URL absolue (http://...)

innerHTML et textContent

On peut aussi modifier le texte ! Et, à la limite, remplacer tout le code HTML ...

innerHTML

innerHTML est une propriété et non d'une méthode ... Il n'existe pas de parenthèses après le nom 

<div id="description">
    <p>Il est beau, <strong>gentil</strong> et intelligent.</p>
</div>

<script>
   var balise = document.getElementById("description");
   var contenu = balise.innerHTML;
</script>

Maintenant, dans le code Javascript, "contenu" vaut "<p>Il est beau, <strong>gentil</strong> et intelligent.</p>"

Et pour remplacer le contenu d'une balise : 

<script>
   var balise = document.getElementById("description");
   balise.innerHTML="<strong>Nouveau</strong> contenu !";
</script>

Maintenant, l'utilisateur verra "Nouveau contenu !" au lieu de "Il est beau, gentil et intelligent"

Non seulement on peut ajouter du texte, mais également des balises ! Donc, grâce au JavaScript on peut ajouter du code HTML à une page déjà écrite en HTML ! ... Trop fort !

Évidemment, la seule balise qu'on ne peut pas ajouter ainsi est justement la balise <script> ...
Rappel : Le code HTML ajouté ou remplacé est ajouté ou remplacé en mémoire (et non dans le fichier HTML)

textContent

"content" en anglais veut dire "contenu" ...
"textContent" peut se traduire par "contenu [uniquement] textuel" (et non texte joyeux !)

textContent est une propriété intéressante. Elle permet de récupérer uniquement le texte, donc sans les éventuelles balises. 

<script>
   var balise = document.getElementById("description");
   var contenu = balise.textContent;
</script>

Maintenant, dans le code Javascript, "contenu" vaut "Il est beau, gentil et intelligent."