• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

Les objets HTML

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Maintenant que la notion d'objet vous est un peu plus familière, revenons au JS dans notre page HTML.

Pour JS, tous les éléments HTML sont des objets (images, liens, etc.) : on va donc pouvoir s'en servir pour en connaître ou en modifier les caractéristiques (comme l'adresse de l'image ou ses dimensions).
Cela se révèlera particulièrement pratique, notamment dans le cas des formulaires, qui nous serviront à communiquer avec notre cher utilisateur :) .

Au fil de ce chapitre, nous allons voir comment accéder à ces objets issus de notre page, et comment les exploiter.

Au sommet de la hiérarchie...

L'objet window

Vous allez rapidement voir qu'en JS, la plupart des fonctions qu'on utilise sont en fait... des méthodes de certains objets !

Prenons nos trois fonctions qui font apparaître des boîtes de dialogues, alert(), prompt() et confirm().

Ah non, ce ne sont pas des méthodes, car on ne retrouve pas la syntaxe objet.methode() !

En fait, si on voulait tout écrire, il faudrait employer window.alert(), window.prompt() et window.confirm()... ce sont donc bel et bien des méthodes, d'un certain objet appelé "window" !

Vous verrez qu'on l'utilisera souvent, car c'est un objet de base, pour ne pas dire l'objet de base : c'est pour cela qu'il est facultatif de préciser son nom, comme vous l'avez toujours fait en écrivant alert() (sachez que le programmeur est un animal très fainéant :D ).
Mais si ça peut vous rassurer, c'est le seul objet qu'on peut ne pas écrire quand on l'utilise.

L'objet document

L'objet document est un sous-objet de window. Cet objet représente la page HTML affichée dans le navigateur. C'est un objet assez important, qu'il est impératif d'écrire ! On ne peut pas l'omettre comme window.

Nous allons passer par ses méthodes pour accéder aux éléments de notre page.

Les objets du document

Atteindre les objets

Il est possible d'atteindre (comprenez accéder à) tous les éléments de la page HTML avec deux méthodes de l'objet document :

  • document.getElementById("id");

  • document.getElementsByTagName("balise");

getElementById("id")

Cette méthode permet d'accéder très facilement à l'élément dont l'id est id.
Je vous rappelle que deux éléments différents doivent avoir des ids différents. Cette fonction nous donne donc bien un élément (ouf :D ).

getElementsByTagName("balise")

Cette méthode retourne sous forme de tableau tous les éléments HTML dont on donne la balise en argument.

document.getElementsByTagName('textarea');

Cet exemple va retourner un tableau contenant tous les éléments <textarea> de la page.

Puisque la méthode retourne un tableau, il est bien sûr possible d'accéder à chacun des éléments. Si on veut accéder au second <textarea> de la page, on procédera donc ainsi (rappelez-vous, on commence à compter à partir de 0) :

document.getElementsByTagName('textarea')[1];

Mais, à quoi peut bien servir cette méthode ? On ne doit pas utiliser ça tous les jours !

Effectivement ! Cela dit, le tableau retourné peut astucieusement être utilisé avec une boucle, de manière à récupérer des éléments particuliers repérés par exemple par leur attribut class ; on pourra ainsi appliquer des changements (comme les masquer) uniquement à ces éléments là.

Compatibilité

Ces deux méthodes font partie du JS depuis sa version 1.5.
Pour situer la chose, sachez qu'elle (cette version) est supportée par les version 5 et supérieures de Internet Explorer : seuls les très vieux navigateurs seront incompatibles...

Bref, il faut juste savoir que ces méthodes ne sont pas présentes depuis les débuts de JS, mais qu'elles sont arrivées après, et qu'il existe un moyen de savoir si la méthode "getElementById" fonctionne sur le navigateur qui exécute le script.
On effectue pour cela ce test :

if(!document.getElementById)     // si la méthode n'existe pas (le ! indique la négation)
     alert("Sympa ta charette...\nVa donc télécharger un vrai navigateur :p");

Comprenez ce code ainsi : si document.getElementById n'est pas défini, alors [...].

Les attributs

Nous n'allons pas étudier tous les attributs de tous les objets, sachez simplement qu'on retrouve presque toujours les mêmes attributs qu'en HTML.
On peut citer les attributs id (encore lui o_O ) et className (qui correspond à l'attribut HTML "class").

Voici quelques exemples...

Modifier l'adresse d'une image et ses dimensions :

monImage = document.getElementsByTagName("img")[0];
monImage.src = "banniere.jpg";
monImage.width = "800";
monImage.height = "200";

Afficher la destination d'un lien :

alert( document.getElementById("idLien").href );

Les évènements

Quelques évènements passe-partout

Voici une liste d'évènements qui s'appliquent à la plupart des objets.
Pour les évènements plus spécifiques, ils seront cités lorsqu'on abordera l'objet en question, dans les chapitres qui suivent.

  • onClick et onDblClick : lors d'un clic / double clic sur l'élément en question

  • onKeyPress : lorsqu'on appuie sur une touche avec cet élément sélectionné

  • onKeyDown et onKeyUp : lorsqu'une touche est enfoncée / relâchée avec cet élément sélectionné

  • onMouseOver et onMouseOut : lorsque le pointeur de la souris arrive sur l'élément / sort de cet élément

  • onMouseMove : lors d'un déplacement de la souris au-dessus de cet élément

  • onMouseDown et onMouseUp : lorsque le bouton de la souris est enfoncé / relâché sur cet élément

Leur utilisation

La première façon de déclencher un script lors d'un évènement, c'est d'utiliser l'attribut HTML, comme nous l'avons vu dans l'un des premiers chapitres :

<img src="azerty.png" alt="" onclick="alert('Oui ?');" />

Mais il est également possible d'indiquer cet évènement directement en JS.
Voici une image (qu'on va repérer grâce à son id) :

<img src="azerty.png" alt="" id="uneImage" />

Et voici le même exemple que ci-dessus, mais directement en JS :

document.getElementById("uneImage").onclick = function()
{
     alert("Oui ?");
}

Un traitement de faveur pour les formulaires

Accéder aux éléments d'un formulaire

En partant d'un formulaire (balise form), il est possible d'accéder à chacun des champs en utilisant leur attribut name.

Jetez un coup d'œil au code HTML suivant :

<form id="monFormulaire" method="post" action="demo.php">
   <p>
     <label for="pseudo">Pseudo :</label>
     <input id="pseudo" name="pseudo" type="text" />
   </p>
   <p>
     <label for="modepasse">Mot de passe :</label>
     <input id="modepasse" name="motdepasse" type="password" />
  </p>
  <p>
     <textarea name="contenu" cols="100" rows="15"></textarea><br />
     <input type="submit" value="Envoyer" />
   </p>
 </form>

Admettons que nous voulons agir sur le champ de texte qui s'appelle pseudo.
On va commencer par accéder au formulaire comme nous l'avons vu, par son id :

var monForm = document.getElementById("monFormulaire");

Voyons maintenant comment accéder au champ nommé "pseudo" à partir de notre formulaire, sans utiliser son id.

Première façon de faire

On utilise directement pseudo, qui est en fait un sous-objet de notre formulaire :

var champPseudo = monForm.pseudo;

Dans le cas des éléments de formulaires, on accède donc aux sous-objets directement par leur nom (l'attribut name).

Seconde manière : un tableau, des indices

On va également pouvoir accéder aux éléments du formulaire en sachant que notre formulaire contient un tableau elements regroupant justement tous ses éléments.

Ainsi, pour accéder au premier champ du formulaire :

var champ1 = monForm.elements[0];
Troisième manière : un tableau associatif

Cette façon d'accéder aux éléments est semblable à la précédente, sauf qu'on utilise pour les indices non pas les numéros, mais les noms.

monForm.elements["pseudo"];

Certes, c'est un peu plus long que la première façon de faire, mais on comprend lors de la lecture que pseudo est un élément de formulaire.

Attributs, méthodes et évènements

Il y a beaucoup à dire concernant l'utilisation des formulaires : en effet, comme nous l'avons dit, c'est un excellent moyen de communiquer avec le visiteur (plus agréable que les boîtes de dialogue).

C'est pourquoi le prochain chapitre y est entièrement consacré.

On récapitule...

Pour accéder à un élément, on va donc généralement utiliser la méthode getElemementById de l'objet document.

var monForm = document.getElementById("idForm");

Si on veut récupérer un tableau contenant toutes les balises ayant un nom donné (toutes les images, par exemple), on va utiliser la méthode getElementsByTagName.

var images = document.getElementsByTagName("img");

Pour les éléments de formulaires : on peut utiliser le tableau elements du formulaire lui-même, ou bien directement le nom de l'élément.
Par exemple, pour accéder au champ nommé "pseudo" de notre formulaire d'id "idForm" :

var champPseudo = monForm.pseudo;

ou bien :

var champPseudo = monForm.elements["pseudo"];

Complément : le mot-clé "this"

Il existe cependant un cas où accéder à un élément est particulièrement simple : c'est lorsque le code se trouve dans la balise HTML de l'objet en question. On utilise dans ce cas le mot-clé this, qui désigne cet élément (d'où son nom).

Un exemple : changer d'image lorsqu'on clique dessus.

<img src="photo.jpg" alt="" onclick="this.src='image.jpg'" />

Ici, l'utilisation de this nous évite d'avoir à repérer l'image par son id.

Un autre exemple, en utilisant une fonction avec un argument :

function afficherDestination(lien)
{
     alert("Ce lien mene ici : " + lien.href);
}
<a href="page.html" onclick="afficherDestination(this);">Cliquez ici</a>

Quand on cliquera sur le lien, une boîte de dialogue nous en affichera la destination.

C'est tout pour ce qui est du fonctionnement des objets.
Nous allons cependant revenir aux formulaires pour les étudier plus en détail, car ce sont des objets trèèès utilisés en JS (comment ça, on l'a déjà dit ?! :D ).

Exemple de certificat de réussite
Exemple de certificat de réussite