Accéder aux éléments dans un document avec JavaScript et modifier leur contenu

L’interface DOM va nous permettre de manipuler le contenu HTML et les styles d’un document.

Pour manipuler du contenu HTML déjà présent sur la page, nous allons cependant avant tout devoir accéder à ce contenu. Nous allons voir différentes propriétés et méthodes nous permettant de faire cela dans cette leçon.

 

Accéder à un élément à partir de son sélecteur CSS associé

La façon la plus simple d’accéder à un élément dans un document va être de la faire en le ciblant avec le sélecteur CSS qui lui est associé.

Deux méthodes nous permettent de faire cela : les méthodes querySelector() et querySelectorAll() qui sont des méthodes du mixin ParentNode et qu’on va pouvoir implémenter à partir des interfaces Document et Element.

La méthode querySelector() retourne un objet Element représentant le premier élément dans le document correspondant au sélecteur (ou au groupe de sélecteurs) CSS passé en argument ou la valeur null si aucun élément correspondant n’est trouvé.

La méthode querySelectorAll() renvoie un objet appartenant à l’interface NodeList. Les objets NodeList sont des collections (des listes) de nœuds.

L’objet NodeList renvoyé est une liste statique (c’est-à-dire une liste dont le contenu ne sera pas affecté par les changements dans le DOM) des éléments du document qui correspondent au sélecteur (ou au groupe de sélecteurs) CSS spécifiés.

Pour itérer dans cette liste d’objets NodeList et accéder à un élément en particulier, on va pouvoir utiliser la méthode forEach(). Cette méthode prend une fonction de rappel en argument et cette fonction de rappel peut prendre jusqu’à trois arguments optionnels qui représentent :

• L’élément en cours de traitement dans la NodeList ;
• L’index de l’élément en cours de traitement dans la NodeList ;
• L’objet NodeList auquel forEach() est appliqué.

Par ailleurs, notez que les deux interfaces Document et Element implémentent leurs méthodes querySelector() ou querySelectorAll() qui vont donc produire des résultats différents selon qu’on les utilise avec des objets de Document ou de Element.

Lorsqu’on utilise querySelector() ou querySelectorAll() avec un objet Document, la recherche se fait dans tout le document. Lorsqu’on utilise l’une de ces méthodes à partir d’un objet Element, la recherche se fait parmi les descendants de l’élément sur lequel on appelle la méthode en question.

See the Pen
Cours JavaScript 8.2.1 by Pierre (@pierregiraud)
on CodePen.

 

Accéder à un élément en fonction de la valeur de son attribut id

La méthode getElementById() est un méthode du mixin NonElementParentNode et qu’on va implémenter à partir d’un objet Document.

Cette méthode renvoie un objet Element qui représente l’élément dont la valeur de l’attribut id correspond à la valeur spécifiée en argument.

La méthode getElementById() est un moyen simple d’accéder à un élément en particulier (si celui-ci possède un id) puisque les id sont uniques dans un document.

See the Pen
Cours JavaScript 8.2.2 by Pierre (@pierregiraud)
on CodePen.

 

Accéder à un élément en fonction de la valeur de son attribut class

Les interfaces Element et Document vont toutes deux définir une méthode getElementsByClassName() qui va renvoyer une liste des éléments possédant un attribut class avec la valeur spécifiée en argument. La liste renvoyée est un objet de l’interface HTMLCollection qu’on va pouvoir traiter quasiment comme un tableau.

En utilisant la méthode getElementsByClassName() avec un objet Document, la recherche des éléments se fera dans tout le document. En l’utilisant avec un objet Element, la recherche se fera dans l’élément en question.

See the Pen
Cours JavaScript 8.2.3 by Pierre (@pierregiraud)
on CodePen.

 

Accéder à un élément en fonction de son identité

La méthode getElementsByTagName() permet de sélectionner des éléments en fonction de leur nom et renvoie un objet HTMLCollection qui consiste en une liste d’éléments correspondant au nom de balise passé en argument. A noter que cette liste est mise à jour en direct (ce qui signifie qu’elle sera modifiée dès que l’arborescence DOM le sera).

Cette méthode est définie différemment par les interfaces Element et Document (pour être tout à fait précis, ce sont en fait deux méthodes qui portent le même nom, l’une définie dans Document, l’autre dans Element).

Lorsqu’on utilise getElementsByTagName() avec un objet Document, la recherche se fait dans tout le document tandis que lorsqu’on utilise getElementsByTagName() avec un objet Element, la recherche se fera dans l’élément en question seulement.

See the Pen
Cours JavaScript 8.2.4 by Pierre (@pierregiraud)
on CodePen.

 

Accéder à un élément en fonction de son attribut name

Finalement, l’interface Document met également à notre disposition la méthode getElementsByName() qui renvoie un objet NodeList contenant la liste des éléments portant un attribut name avec la valeur spécifiée en argument sous forme d’objet.

On va pouvoir utiliser cette méthode pour sélectionner des éléments de formulaire par exemple.

 

Accéder directement à des éléments particuliers avec les propriétés de Document

Finalement, l’interface Document fournit également des propriétés qui vont nous permettre d’accéder directement à certains éléments ou qui vont retourner des objets contenant des listes d’éléments.

Les propriétés qui vont le plus nous intéresser ici sont les suivantes :

• La propriété body qui retourne le nœud représentant l’élément body ;
• La propriété head qui retourne le nœud représentant l’élément head ;
• La propriété links qui retourne une liste de tous les éléments a ou area possédant un href avec une valeur ;
• La propriété title qui retourne le titre (le contenu de l’élément title) du document ou permet de le redéfinir ;
• La propriété url qui renvoie l’URL du document sous forme de chaine de caractères ;
• La propriété scripts qui retourne une liste de tous les éléments script du document ;
• La propriété cookie qui retourne la liste de tous les cookies associés au document sous forme de chaine de caractères ou qui permet de définir un nouveau cookie.

See the Pen
Cours JavaScript 8.2.5 by Pierre (@pierregiraud)
on CodePen.

 

Accéder au contenu des éléments et le modifier

Jusqu’à présent, nous avons vu différents moyens d’accéder à un élément en particulier dans un document en utilisant le DOM.

Accéder à un nœud en particulier va nous permettre d’effectuer différentes manipulations sur celui-ci, et notamment de récupérer le contenu de cet élément ou de le modifier.

Pour récupérer le contenu d’un élément ou le modifier, nous allons pouvoir utiliser l’une des propriétés suivantes :

• La propriété innerHTML de l’interface Element permet de récupérer ou de redéfinir la syntaxe HTML interne à un élément ;
• La propriété outerHTML de l’interface Element permet de récupérer ou de redéfinir l’ensemble de la syntaxe HTML interne d’un élément et de l’élément en soi ;
• La propriété textContent de l’interface Node représente le contenu textuel d’un nœud et de ses descendants. On utilisera cette propriété à partir d’un objet Element ;
• La propriété innerText de l’interface Node représente le contenu textuel visible sur le document final d’un nœud et de ses descendants. On utilisera cette propriété à partir d’un objet Element.

See the Pen
Cours JavaScript 8.2.6 by Pierre (@pierregiraud)
on CodePen.