Aller au menu - Aller au contenu

Icône Les objets HTML

Par Avatar JoSé2
Mise à jour : 22/07/2009
5 116 visites depuis 7 jours, dont 88 sur ce chapitre classé 38/786
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.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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" !

L'objet window "représente" la fenêtre de votre navigateur. Ça va être un objet très utilisé, car il possède de nombreux sous-objets.


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.

Toutes les fonctions ne sont pas des méthodes de window !
En fait, parmi les fonctions qu'on a vues, seules les trois citées plus haut en sont.
Tenez, par exemple, isNaN() est une fonction qui n'appartient à aucun objet.



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.
Retour en haut

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.

Code : JavaScript
1
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) :
Code : JavaScript
1
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à.

On écrit getElementsByTagName, car on récupère un tableau d'éléments.
Avec getElementById, on récupère un élément unique, donc pas de s.



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 :
Code : JavaScript
1
2
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").

Ce dernier est l'un des rares attributs dont le nom n'est pas le même qu'en HTML.
La cause : le mot-clé "class" est réservé en JS (on n'a pas le droit de l'utiliser pour des noms de variables ou autres). Donc il a fallu trouver un autre nom, d'où className.


Voici quelques exemples...

Modifier l'adresse d'une image et ses dimensions :
Code : JavaScript
1
2
3
4
monImage = document.getElementsByTagName("img")[0];
monImage.src = "banniere.jpg";
monImage.width = "800";
monImage.height = "200";


Afficher la destination d'un lien :
Code : JavaScript
1
alert( document.getElementById("idLien").href );


Sachez qu'il existe une autre façon de modifier un attribut d'un objet HTML, en utilisant un truc nommé DOM, mais on en reparlera en temps voulu ;) .



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.

Rappel : les évènements doivent se noter en minuscule, même si on les écrit onEvent pour plus de lisibilité.


  • 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 :

Code : HTML
1
<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) :

Code : HTML
1
<img src="azerty.png" alt="" id="uneImage" />


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

Code : JavaScript
1
2
3
4
document.getElementById("uneImage").onclick = function()
{
     alert("Oui ?");
}


Ce code JS doit être placé dans la page, après l'image !
S'il se trouve dans l'en-tête de la page, l'image n'aura pas encore été créée lors de son exécution (qui se fait au fil du chargement de la page), et JS ne pourra donc pas lui associer un évènement.


On associe bien une fonction à l'évènement !
On peut également le faire de cette manière :
Code : JavaScript
1
2
3
4
5
function quoi()
{
      alert("Oui ?");
};
document.getElementById("uneImage").onclick = quoi;   // on parle de la fonction elle-meme : pas de parentheses


En revanche, ceci est faux :
Code : JavaScript
1
document.getElementById("uneImage").onclick = alert("Oui ?");
Retour en haut

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 :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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 :
Code : JavaScript
1
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 :
Code : JavaScript
1
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 :
Code : JavaScript
1
var champ1 = monForm.elements[0];


Je vous déconseille cette façon d'accéder aux éléments : si vous insérez un champ, les indices (les numéros) changent, et il faut modifier le script en conséquence :( .



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.
Code : JavaScript
1
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.
Code : JavaScript
1
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.
Code : JavaScript
1
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" :
Code : JavaScript
1
var champPseudo = monForm.pseudo;

ou bien :
Code : JavaScript
1
var champPseudo = monForm.elements["pseudo"];
Retour en haut

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.
Code : HTML
1
<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 :
Code : JavaScript
1
2
3
4
function afficherDestination(lien)
{
     alert("Ce lien mene ici : " + lien.href);
}

Code : HTML
1
<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.
Retour en haut

Q.C.M.

Pour accéder aux objets HTML de notre page (sans utiliser this), on passe par :

Vrai ou faux ?



Si on a un formulaire dont l'id est toto, ainsi que cette ligne :
Code : JavaScript
1
var f = document.getElementById("toto");


On peut alors accéder à chacun des champs du formulaire grâce à :
Code : JavaScript
1
f.nomDuChamp;
Dans l'utilisation que nous en avons vu, this se place :

Statistiques de réponses au QCM

Retour en haut
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 ).
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
4 commentaires pour "Les objets HTML"
Note moyenne : 3.51 / 4 (260 votes)
Pseudo Commentaire
Hors ligne Frank_mtf # Posté le 11/04/2009 à 23:25:25
Je vais prouver que j'existe
Avatar

Ville : Douala
Pays : Cameroun

 Super ! :D
Je trouve que c'est bien expliqué. Tu as montré plein de façons de faire et je trouve surtout que c'est bien de nous rappeler quelles erreurs on peut rencontrer. ;)
Je dire de plus ? Bravo ! :)
Image utilisateur

Je construit un site web visitez-le ! Pixel Dimension : Publier et lire des BD en ligne :)

Image utilisateur
 
Hors ligne lenainjaune # Posté le 15/08/2009 à 12:13:17
Avatar

 Bonjour,

Tout d'abord merci beaucoup pour ce tutoriel, qui me permet de me lancer dans le JS. Jusqu'alors le JS me semblait bien obscur...

Une petite remarque cependant:

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

Trouvant bizarre que l'id ne soit pas utilisé (vu qu'il cible un élément unique), j'ai effectué plusieurs tests, en dissociant l'attribut id de l'attribut name.

Voici le résultat de mes recherches:
elements[...] cherche d'abord par id et s'il ne trouve pas, cherche par name (testé sous Firefox 3.0.3).

De plus ce n'est pas la première fois que je constate dans un formulaire, que la même valeur est donnée pour l'attribut id et pour l'attribut name.

N'est ce pas source de confusion avec la balise label ?

Cordialement
J'aime ce qui est parfaitement clair !
 
Hors ligne dark scorpio # Posté le 21/04/2010 à 14:25:32
Avatar

Études : IUT Nancy-Charlemagne

 Super tuto, bien expliqué !

Mais dans ce chapitre je crois qu'il y a une petite faute de frappe, au récapitulatif :

"Pour accéder à un élément, on va donc généralement utiliser la méthode getElemementById de l'objet document."
Hors ligne mdr1 # Posté le 19/11/2010 à 22:40:21
你好吗？我很好!
Avatar

Avis : Très bon

J'ai une question pour onClick et onDblClick : est-ce que suite à un doucle clic, le premier évènement a eu le temps de se déclencher si bien que les deux ont été déclenchés ?
 

Voir tous les commentaires