download link W3C open

Accéder au document avec l'interface DOM

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

Pour rappel au chargement d'un fichier HTML, pour chaque élément HTML trouvé dans le fichier il y a une instance d'un objet Javascript qui est accrochée dans un arbre. Et c'est en manipulant cette instance en Javascript que le programmeur peut modifier le HTML qui est affiché sur l'écran du navigateur.

Les méthodes récupèrent des adresses mémoire

Pour cela le programmeur dispose de cinq méthodes qui vont lui permettre de récupérer les adresses mémoire des instances des objets Javascript. Et c'est en utilisant ces adresses que l'on appelle des pointeurs ou des références que le programmeur Javascript va pouvoir "retourner dans l'arbre" pour faire des modifications.

Ci-dessous le principe de fonctionnement de ces cinq méthodes :

Synoptique méthode getElementByid
Synoptique méthode getElementsByTagName
Synoptique méthode getElementsByClassName
Synoptique méthode querySelector
Synoptique méthode querySelectorAll
  • Toutes ces méthodes sont accessibles depuis l'instance document.
  • Remarquez la construction des noms. Vous avez getElement au singulier dans getElementById car une seule adresse d'élément est retourné. Vous avez getElements au pluriel dans getElementsByTagName et getElementsByClassName car un tableau d'adresses d'éléments est retourné.
  • Remarquez la similitude de fonctionnement. getElementById et querySelector retourne une seule adresse d'élément ou null si rien n'est trouvé.
  • Remarquez une autre similitude de fonctionnement. getElementsByTagName , getElementsByClassName, querySelectorAll retourne un tableau d'adresses d'éléments ou un tableau vide si rien n'est trouvé.

#2 La méthode document.getElementById() open

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

Syntaxe

adresseElement = document.getElementById('nomIdentificateur');

Paramètres

nomIdentificateur : 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

L'adresse d'un élément ou la valeur null si rien n'est trouvé.

Pour un titre <h1> l'adresse retournée pointe sur une instance d'un objet de constructeur HTMLHeadingElement. Pour un lien <a> l'adresse retournée pointe sur une instance d'un objet de constructeur HTMLAnchorElement. Ces deux objets sont enfants de l'objet HTMLElement.

Exemple

Tester le code

Si vous voulez savoir ce que vous pouvez manipuler "dans votre HTML" le mieux est de regarder dans la documentation MDN, par exemple Objet HTMLAnchorElement

#3 La méthode document.getElementsByTagName() open

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

Syntaxe

tableau = 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 tableau qui contient les adresses des éléments. Ce tableau est vide si aucun élément n'est trouvé.

Exemple

Tester le code

Vous récupérez un tableau mais attention ce tableau n'est pas un tableau de constructeur Array(). C'est un tableau de constructeur HTMLCollection. Vous n'aurez pas avec HTMLCollection les nombreuses méthodes qui sont disponibles sur l'objet Array().

Prototype de HTMLCollection
Tableau HTMLCollection

#4 La méthode document.getElementsByClassName() open

Sélectionne les adresses de tous les éléments du document qui appartiennent à la même classe. Si il y a d'autres classes de positionnées sur l'élément ce n'est pas gênant.

Syntaxe

tableau = 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 tableau qui contient les adresses des éléments. Ce tableau est vide si aucun élément n'est trouvé.

Exemple

Tester le code

#5 La méthode document.querySelector() open

Retourne l'adresse du premier élément parmi le ou les éléments désigné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

L'adresse d'un élément ou la valeur null si rien n'est trouvé.

Exemple

Tester le code

#6 La méthode document.querySelectorAll() open

Retourne les adresses de tous les éléments trouvés par le sélecteur CSS.

Syntaxe

tableau = 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 tableau qui contient les adresses des éléments. Ce tableau est vide si aucun élément n'est trouvé.

Exemple

Tester le code

Même remarque que précédemment. Vous récupérez un tableau mais attention ce tableau n'est pas un tableau de constructeur Array(). C'est un tableau de constructeur NodeList. Vous n'aurez pas avec NodeList les nombreuses méthodes qui sont disponibles sur l'objet Array().

Prototype de NodeList
Tableau NodeList