: javascript

Repérer les éléments

Avant de pouvoir manipuler un élément du document, il faut pouvoir le repérer (le référencer). Pour cela il faut pouvoir le trouver dans le document. Le DOM offre de nombreuses fonctionnalités pour ça.

Le repérage par l'attribut ID

L'attribut ID d'un élément est (doit être) unique au sein d'un même document. Pour repérer un élément dont on connait l'ID on écrit:

var e = document.getElementById('id_de_l_element');

Dans ce cas, la variable e prend la valeur d'une référence vers l'élément. Il est dés lors possible de manipuler cet élément en utilisant la variable equi aurait pu s'appeler n'importe comment pour autant que l'on respecte les règles de nomage.

Le repérage par le nom de l'élément

Chaque élément porte un nom, h1, p, div, etc... c'est ce que l'on appel le tagName. A ne pas confondre avec l'attribut name que peuvent avoir certains éléments.

le DOM offre une fonction getElementsByTagName() qui permet d'obtenir la liste de tous les éléments voulu. Par exemple:

var gros_titres = document.getElementsByTagName('h1');

Cette fonction renvoie toujours un tableau d'éléments. Celui-ci peut être vide si aucun élément n'existe, il peut contenir un ou plusieurs éléments qui sont dans l'ordre dans lequel ils apparaissent dans le code source de la page.

var gros_titres = document.getElementsByTagName('h1');
var premier_titre = gros_titres[0];
var second_titre = gros_titres[1];

Repérage par l'attribut name

Il est aussi possible d'obtenir tous les éléments qui ont un attribut name de valeur spécifique. Contrairement à l'attribut id qui est unique, plusieurs éléments peuvent avoir le même attribut name. Cet attribut est généralement utilisé pour les champs de formulaires. Exemple typique, les boutons radio. Il y a plusieurs éléments input qui portent le même nom. Par exemple pour un choix de couleurs:

<input type='radio' name='couleur' value='rouge' />
<input type='radio' name='couleur' value='vert' />
<input type='radio' name='couleur' value='bleu' />

Si l'on veut traiter ces champs on pourrait écrire:

var boutons = document.getElementsByName('couleur');

Ce qui dans cet exemple, nous retournerai un tableau de 3 éléments input

Autres types de repérage

les fonctions du DOM pour repérer les éléments sont de bas niveau. Heureusement, de nombreuses fonctions existent dans les frameworkensemble de fonctionnalités facilitant le développement des certains type d'application

Deux exemples qui sont souvent utiles et qui ne sont pas disponibles directement dans l'API du DOM

Editer