Bovino

[Actualité] Les méthodes de récupération des éléments du DOM

Noter ce billet

par

Bovino

, 07/05/2015 à 15h43 (2469 Affichages)

Dans le cadre d'une page Web, la finalité de JavaScript est essentiellement de modifier les informations affichées. Pour cela, il est nécessaire de récupérer puis manipuler les objets du Document Object Model ou DOM.

Pour récupérer ce ou ces éléments, diverses méthodes sont disponibles.

Différence entre élément DOM et collection
Les méthodes de récupération d'éléments peuvent renvoyer deux types de valeurs : soit un élément, soit une collection d'éléments.
Un élément (ou HTMLElement) est un objet correspondant à la représentation par JavaScript d'une balise HTML. Cet objet possède notamment diverses propriétés correspondant aux valeurs des divers attributs que cette balise peut contenir.
Une collection (ou HTMLCollection) est un objet (comparable en fait à un tableau) comprenant plusieurs éléments.
Cette différence est importante, car JavaScript ne sait traiter qu'un élément à la fois, si vous récupérez une collection (y compris ne contenant qu'un seul élément), il sera obligatoire de traiter les éléments qu'il contient individuellement en général avec une boucle (une collection possède une propriété length correspondant au nombre d'éléments qu'elle contient).

Les propriétés de l'objet document
L'objet document dispose de propriétés référençant divers éléments et collections utiles (les collections obsolètes ne sont pas listées).

document.head (élément) : représente la balise HTML <head>.
document.body (élément) : représente la balise HTML <body>.
document.anchors (collection) : représente toutes les ancres du document (sont considérées comme ancres toutes les balises <a> ayant un attribut name bien qu'une ancre puisse aussi être atteinte par son attribut id).
document.embeds (collection) : représente tous les éléments correspondants aux balises HTML <embed>.
document.forms (collection) : représente tous les formulaires du document.
document.images (collection) : représente toutes les images du document (balises HTML <img /> uniquement).
document.links (collection) : représente tous les liens hypertexte du document (balises HTML <area> et <a> ayant un attribut href).
document.scripts (collection) : représente toutes les images du document (balises HTML <script>).

Notez aussi en complément que chaque objet HTMLFormElement (correspondant aux formulaires) possède une propriété elements contenant la collection de tous les champs du formulaire et que chaque objet HTMLSelectElement (balises HTML <select>) une propriété options contenant la collection de ses options (balises HTML <option>).

Les méthodes de l'objet document et/ou HTMLElement
Il est aussi possible de récupérer des éléments ou des collections à partir soit de l'objet document, soit d'un objet HTMLElement.

getElementById(id) (élément) : récupère l'élément dont l'identifiant vaut la valeur passée en paramètre. Cette méthode ne renvoie qu'un élément car un id doit être unique dans le document. Ne s'applique qu'à l'objet document.
querySelector(sélecteur CSS) (élément) : cette méthode prend en paramètre une chaine de caractères correspondant à une syntaxe de sélecteur CSS et renvoie le premier élément du document correspondant à ce sélecteur.
getElementsByName(name) (collection) : récupère tous les éléments du document ayant un attribut HTML name correspondant au paramètre passé.
getElementsByTagName(name) (collection) : récupère tous les éléments du document dont le nom de balise correspond au paramètre passé.
getElementsByClassName(classe) (collection) : récupère tous les éléments du document ayant un attribut HTML class correspondant au paramètre passé.
querySelectorAll(sélecteur CSS) (collection) : cette méthode prend en paramètre une chaine de caractères correspondant à une syntaxe de sélecteur CSS et renvoie tous les éléments du document correspondant à ce sélecteur.

Vous l'aurez compris, ce qu'il est important de retenir avec ces méthodes, c'est d'abord quel type de donnée vous sera retourné, ensuite, que vous ne pouvez pas, avec JavaScript, faire de traitement par lot sur une collection, il est obligatoire de passer par une boucle pour traiter chaque élément séparément.

N'hésitez pas à faire part de vos remarques et commentaires.