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 .
- document.body (élément) : représente la balise HTML .
- document.anchors (collection) : représente toutes les ancres du document (sont considérées comme ancres toutes les balises 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
- document.forms (collection) : représente tous les formulaires du document.
- document.images (collection) : représente toutes les images du document (balises HTML
uniquement).
- document.links (collection) : représente tous les liens hypertexte du document (balises HTML et 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