Javascript est un langage orienté objet. Un objet est un ensemble de données (appelées propriétés) et de fonctions (appelées méthodes).
Par exemple, l’objet désignant la fenêtre du navigateur est nommé window. Cet objet contient, entre autres, un objet nommé document qui est le document HTML.
L’une des méthodes de l’objet window est close() qui a pour fonction de fermer la fenêtre (que l’on aura ouverte préalablement). Une autre est open(arguments) où l’argument minimal sera le nom de la page HTML qui sera ouverte dans une nouvelle fenêtre.
Pour désigner une propriété ou accéder à une méthode d’un objet, il suffit d’ajouter un point au nom de cet objet suivi du nom de la méthode ou de la propriété. Ainsi l’objet document étant contenu dans l’objet window, il sera accessible par window.document. Néanmoins, comme tous les objets sont des enfants de window, il est possible d’écrire simplement document.
Plus généralement, prenons l’exemple d’un objet2 contenu dans un objet1 qui est lui même contenu dans l’objet document, alors on accédera à cet élément par la syntaxe pointée respectant cette hiérarchie, c’est-à-dire :
document.objet1.objet2
Il y a essentiellement deux façons de nommer un objet.
- Soit on utilise la valeur de l’attribut name de la balise associée à cet objet. Par exemple, considérons l’une des balises (double ou simple) :
<element name="objet1"></element> ou <element name="objet1"/>
alors l’objet correspondant sera appelé objet1.
- Soit on utilise la valeur de l’attribut id. Par exemple, considérons l’une des balises (double ou simple) :
<element id="élément1"></element> ou <element id="élément1"/>
alors l’objet associé sera désigné en utilisant la méthode getElementById("élément1").
La syntaxe XHTML stricte ne permet plus de donner un attribut name ni aux formulaires, ni aux images, ni aux liens et ancres. Il faudra donc accéder à ces élément par leurs identifiants en utilisant la méthode getElementById().
Considérons un document HTML dont le corps de la page est le suivant :
<body>
<form id="formulaire" action="">
<p><input type="text" name="prenom" value="olivier" /> </p>
</form>
</body>
alors l’objet associé à la balise <input type="text" name="prenom" value="olivier" /> est accessible via le chemin hiérarchique
document.getElementById("formulaire").prenom
et sa valeur (c’est-à-dire le texte apparent) par
document.getElementById("formulaire").prenom.value
Si vous voulez, par exemple, modifier la valeur initiale "olivier" en "paul", il suffira d’écrire l’instruction suivante :
document.getElementById("formulaire").prenom.value="paul"