DEVENIR-WEBMASTER.COM Log In
 18
open

Accéder au document avec l'interface DOM

# Comment s'y prendre pour accéder aux éléments ? open

Dans le tutoriel précédent on a vu comment parcourir l'arborescence des objets du document de manière à atteindre un élément. A chaque fois on est parti de la racine du document. On va voir maintenant qu'il est possible d'accéder directement à un ou plusieurs objets éléments en les sélectionnant directement dans l'arbre.

On va le faire :

  1. soit en utilisant un identificateur.
  2. soit en utilisant le nom d'un élément.
  3. soit en utilisant le nom d'une classe.
  4. soit en utilisant un sélecteur CSS.

Pour cela nous avons à notre disposition cinq méthodes de l'objet document.

En pratique un programmeur mémorise généralement l'accès à l'élément puis s'en sert plusieurs fois pour manipuler les attributs ou méthodes de l'élément.

# La méthode document.getElementById() open

Sélectionne un élément et un seul à partir de son identificateur.

Syntaxe

un_element = document.getElementById('identificateur');

Paramètres

Le nom d'un identificateur. Ce nom doit être unique dans le document sinon il y a une ambiguïté pour pouvoir choisir un seul élément. Ce nom doit être ici une chaîne de caractères de type string. Enfin attention car ce nom est case sensitive.

Valeur de retour

Un objet HTMLxxxxElement (xxxx pour le nom de l'élément) enfant de HTMLElement ou alors la valeur null si l'élément n'a pas été trouvé.

Pour un titre <h1> l'objet retourné est un objet de constructeur HTMLHeadingElement. Pour un lien <a> l'objet retourné est un objet de constructeur HTMLAnchorElement. Ces deux objets sont enfants de l'objet HTMLElement.

Exemple

Tester le code
Un extrait de l'arborescence des objets du niveau HTML
Arborescence des objets de niveau HTML

Ci dessous les structures de données de ces objets.

Objet HTMLElement
Objet HTMLElement
Objet HTMLHeadingElement
Objet HTMLHeadingElement
Objet HTMLAnchorElement
Objet HTMLAnchorElement

# La méthode document.getElementsByTagName() open

Sélectionne tous les éléments du document qui ont le même nom. Par exemple 'p' pour tous les paragraphes ou 'div' pour toutes les divisions.

Syntaxe

elements = document.getElementsByTagName('tagName')

Paramètre

tageName est le nom des éléments recherchés. Ce nom doit être une chaîne de caractères de type string. Le nom n'est pas case sensitive.

Valeur de retour

HTMLCollection un objet assimilable à un tableau d'éléments éventuellement vide si aucun élément n'est sélectionné.

Exemple

Tester le code

Ci dessous on examine ce que contient le "tableau" retourné.

Tester le code

# La méthode document.getElementsByClassName() open

Sélectionne tous les éléments du document qui appartiennent à la même classe. Ils peuvent éventuellement en avoir une ou plusieurs autres ce n'est pas gênant.

Syntaxe

elements = document.getElementsByClassName('nomDeClasse')

Paramètre

nomDeClasse nom de la classe des éléments recherchés. Ce nom doit être une chaîne de caractères de type string. Ce nom est case sensitive.

Valeur de retour

HTMLCollection un objet assimilable à un tableau d'éléments éventuellement vide si aucun élément n'est sélectionné.

Exemple

Tester le code

# La méthode document.querySelector() open

Sélectionne le premier des éléments ciblés par le sélecteur CSS.

Syntaxe

HTMLxxxxElement = document.querySelector('selecteur')

Paramètre

selecteur sélecteur CSS pour les éléments recherchés. Ce nom doit être une chaîne de caractères de type string.

Valeur de retour

HTMLxxxxElement un objet correspondant à l'élément sélectionné ou null si aucun élément n'est sélectionné.

Exemple

Tester le code

# La méthode document.querySelectorAll() open

Sélectionne les éléments ciblés par le sélecteur CSS.

Syntaxe

elements = document.querySelectorAll('selecteur')

Paramètre

selecteur sélecteur CSS pour les éléments recherchés. Ce nom doit être une chaîne de caractères de type string.

Valeur de retour

NodeList un objet assimilable à un tableau d'éléments éventuellement vide si aucun élément n'est sélectionné.

Exemple

Tester le code

Ci dessous on examine ce que contient le "tableau" retourné.

Tester le code