DHTML:Accès aux éléments et attributs
Un article de WikiTuto.
Sommaire |
Accès direct
Accès aux éléments à partir de l'ensemble du document
Il existe un objet particulier, l'objet document. Cet objet possède nombre de propriétés et de méthodes. Trois de ces dernières permettent de "pointer" directement un ou plusieurs éléments dans le document.
- La méthode getElementById permet de sélectionner un élément d'identifiant donné dans une page ;
- La méthode getElementsByName permet de sélectionner les éléments portant un nom donné dans une page ; mais cette méthode, survivance de Netscape, n'est pas supportée par Internet Explorer ;
- La méthode getElementsByTagName permet de sélectionner les éléments portant un nom de balise donné dans une page.
Ces méthodes sont exposées rapidement dans un exemple.
On peut également accéder aux divers éléments d'un document par leur numéro d'ordre dans ce dernier. Par exemple, les collections document.forms et document.images permettent d'accéder aux divers éléments de formulaires et images du document. Cette méthode présente cependant l'inconvénient de fortement dépendre d'une connaissance a priori du nombre d'éléments dans la page ; pour peu que par exemple le nombre d'images change, la numérotation des éléments du tableau doit être revue si l'on veut pouvoir accéder à une image en particulier.
Exercice 1. Méthodes getElementById, getElementsByName et getElementsByTagName
Exercice 2. Petite récréation: réalisation d'une horloge
Accès aux nœuds à partir d'un élément quelconque d'un document
Il existe aussi des méthodes qui, à partir d'un élément donné, permettent d'accéder à certains de ses descendants :
- La méthode getElementsByTagName(), comme précédemment, permet d'obtenir une collection d'éléments descendants de l'élément courant, et possédant un nom de balise donné. Par exemple,
x=(document.getElementsByTagname('monpar'))[0] ;
liens=x.getElementsByTagName('a') ;
renvoie la collection de liens dans le paragraphe identifié par monpar.
- La méthode getAttribute(nom_d_attribut) permet de sélectionner un attribut particulier d'un élément déterminé.
Accès relatif
Introduction
Les méthodes précédentes demandaient de connaître précisément soit l'identifiant, soit le nom exact du nœud cherché. Nous allons voir maintenant comment il est possible d'accéder à des collections de nœuds dont on ne connaît pas ces caractéristiques a priori.
Dans toute la suite, elt désignera un élément que l'on aura au préalable identifié (par exemple par une méthode getElementById()).
Accès aux attributs
Contrairement à la méthode getAttribute(), qui permet de retourner la valeur d'un attribut de nom donné, la propriété attributes renvoie à la collection complète des attributs d'un élément. Par exemple, si elt désigne l'élément img suivant, cette méthode renverra une liste constituée des nœuds src, alt, width et height (dans cet ordre).
<img src="oiseau.gif" alt="Un oiseau sur un arbre" width="45" height="60">
Accès aux nœuds-enfants
On peut accéder très facilement à la liste des nœuds-enfants d'un élément donné. Pour cela, trois propriétés existent.
- elt.childNodes donne la liste de tous les nœuds-enfants de l'élément elt.
- elt.firstChild est équivalent à elt.childNodes[0], et renvoie le premier nœud-enfant de l'élément elt.
- elt.lastChild renvoie le dernier nœud-enfant de l'élément elt.
Exercice 1. Accès aux enfants
Exercice 2. Manipulation des styles des enfants
Accès aux nœuds-frères
Le nœud courant peut avoir des frères. On accède au frère précédent à l'aide de la propriété previousSibling, et au nœud suivant par la propriété nextSibling.
Accès aux nœuds-ancêtres
On peut enfin remonter d'un cran dans la hiérarchie des nœuds avec la propriété parentNode, et revenir à l'élément-racine d'un document (dans le cas d'un document HTML il s'agit bien sûr de <html>), avec la propriété documentElement.
Accès par les collections
Quatre collections donnent accès à différents éléments du document :
- window.frames permet d'accéder à la liste des frames du document courant ; chaque élément de cette collection est alors du type window, et manipulable grâce aux propriétés et méthodes correspondantes (voir le chapitre dédié à la manipulation des fenêtres du navigateur).
- document.forms, document.images et document.links sont les collections des éléments de formulaire, de liens et d'images du document.
Voir aussi
- Qu'est-ce que le DOM?
- Accès aux éléments et attributs
- Avoir des informations sur les nœuds
- Modification de contenu
