Manipuler le DOM avec les méthodes de type getter et setter jQuery

Dans les leçons précédentes, nous avons vu différentes façons de sélectionner ou d’accéder à des éléments HTML : utilisation de sélecteurs pour un accès direct aux éléments ou de méthodes pour filtrer une première sélection ou pour se déplacer dans le DOM à partir d’autres éléments.

Nous sommes donc maintenant capables d’accéder à n’importe quel élément d’une page. Nous allons alors pouvoir utiliser différentes méthodes jQuery pour récupérer des informations sur ces éléments et notamment récupérer leur contenu ou encore effectuer toutes sortes de manipulations sur ces éléments : modification du contenu, des styles CSS et des dimensions ou encore suppression de ces éléments, remplacement par d’autres éléments ou ajout de nouveaux éléments avant ou après les éléments sélectionnés.

 

Fonctionnement des méthodes getters et setters jQuery

Dans la plupart des langages informatiques, les fonctions / méthodes qui permettent d’obtenir ou de définir des informations fonctionnent par paire qu’on appelle “getters” et “setters”.

Le rôle d’un getter est de récupérer une information. Le rôle d’un setter est de définir ou de mettre à jour une information.

Par convention, les fonctions de type getter commencent par le préfixe “get” tandis que les fonctions de type setter commencent par le préfixe “set”. Cela nous permet de rapidement les identifier.

Par exemple, le Javascript possède une méthode getAttribute() qui nous permet de récupérer un attribut HTML et une une méthode setAttribute() qui nous permet de définir ou de mettre à jour la valeur d’un attribut pour un élément HTML.

jQuery va fonctionner différemment de ce modèle classique et ne va dans la plupart des cas pas faire de distinction entre getter et setter. En effet, en jQuery, les méthodes qui permettent d’obtenir des informations vont également généralement permettre de définir / mettre à jour ces informations et donc servir à la fois de getter et de setter.

De manière générale, ces méthodes vont agir comme getter lorsqu’on ne leur passera pas d’argument et comme setter lorsqu’on va leur fournir un argument.

Il convient de noter que dans le cas où on sélectionne plusieurs éléments différents d’un coup, tous les éléments de la sélection seront affectés si on utilise l’une de ces méthodes en tant que setter mais seules les informations relatives au premier élément de la sélection seront renvoyées si on les utilise comme getter, à l’exception notable de la méthode text() qui va récupérer les valeurs de tous les éléments de la sélection.

Voici la liste de ces méthodes (que nous allons étudier par la suite) :

• html() : Permet d’obtenir le contenu HTML du premier élément d’une sélection ou de définir le contenu HTML de tous les éléments de la sélection ;
• text() : Permet d’obtenir ou de définir les contenus textuels de tous les éléments d’une sélection ;
• attr() : Permet d’obtenir la valeur d’un attribut du premier élément d’une sélection ou de définir un ou plusieurs attributs pour tous les éléments de la sélection ;
• prop() : Permet d’obtenir la valeur d’une propriété du premier élément d’une sélection ou de définir une ou plusieurs propriétés pour tous les éléments de la sélection ;
• val() : Permet d’obtenir la valeur (le contenu de l’attribut value) du premier élément d’une sélection ou de définir une valeur pour tous les éléments de la sélection ;
• css() : Permet d’obtenir la valeur d’une propriété CSS pour le premier élément d’une sélection ou de définir les valeurs d’une ou de plusieurs propriétés CSS pour tous les éléments de la sélection ;
• height() : Permet d’obtenir la hauteur de la boite élément du premier élément d’une sélection ou de définir cette hauteur pour tous les éléments de la sélection ;
• innerHeight() : Idem height() mais inclut les marges intérieures (padding) dans le calcul ;
• outerHeight() : Idem height() mais inclut les marges intérieures (padding), les bordures et de manière optionnelle les marges extérieures (margin) dans le calcul ;
• width() : Permet d’obtenir la largeur de la boite élément du premier élément d’une sélection ou de définir cette largeur pour tous les éléments de la sélection ;
• innerWidth() : Idem width() mais inclut les marges intérieures (padding) dans le calcul ;
• outerWidth() : Idem width() mais inclut les marges intérieures (padding), les bordures et de manière optionnelle les marges extérieures (margin) dans le calcul ;
• offset() : Permet d’obtenir les coordonnées actuelles du premier élément d’une sélection ou de définir les coordonnées de tous les éléments de la sélection relativement au document ;
• scrollLeft() : Permet d’obtenir la position actuelle de la barre de défilement horizontale du premier élément d’une sélection ou de définir cette position tous les éléments de la sélection ;
• scrollTop() : Permet d’obtenir la position actuelle de la barre de défilement verticale du premier élément d’une sélection ou de définir cette position tous les éléments de la sélection.

Dans la suite de cette leçon, nous allons nous contenter de présenter les méthodes html() et text(). Nous étudierons les autres méthodes dans des leçons séparées.

 

La méthode jQuery html()

La méthode html() va retourner le contenu HTML du premier élément d’une sélection si on l’utilise sans argument ou définir le contenu HTML de tous les éléments d’une sélection si on précise ce contenu en argument.

Regardez plutôt l’exemple ci-dessous :

See the Pen
Cours jQuery 2.3.1 by Pierre (@pierregiraud)
on CodePen.

On commence ici par cibler nos éléments body et le paragraphe possédant l’id="p1" et on utilise la méthode html() sans argument sur les deux objets jQuery renvoyés qui représentent notre élément body et notre élément p.

La méthode html() agit ici comme un getter et va récupérer le contenu HTML du corps de page et de notre premier paragraphe. On place les résultats renvoyés par html() dans deux variables let page et let p1 et on affiche leur contenu dans la console JavaScript avec l’instruction console.log() pour s’assurer de ce qu’elle contiennent.

Note : pour afficher la console, vous devez activer les outils pour développeurs de votre navigateur puis effectuer un clic droit sur la page et choisir “inspecter”.

On cible ensuite l’élément possédant l’attribut id="p2" et on utilise notre méthode html() en lui passant cette fois-ci des données en argument. La méthode html() va alors agir comme un setter et modifier le contenu HTML de notre deuxième paragraphe.

 

La méthode jQuery text()

La méthode text() va nous permettre de récupérer ou de modifier le contenu textuel de tous les éléments d’une sélection.

A la différence de la méthode html(), seul le contenu textuel va pouvoir être récupéré et on ne va pouvoir également définir que du contenu textuel dans nos éléments.

See the Pen
Cours jQuery 2.3.2 by Pierre (@pierregiraud)
on CodePen.

Comme vous pouvez le voir dans cet exemple, la méthode text() va bien récupérer le contenu textuel (et uniquement le contenu textuel) de tous les éléments d’une sélection lorsqu’on l’utilise en tant que getter. C’est un cas unique.

Lorsqu’on utilise text() en tant que setter, cette méthode ne va pouvoir définir qu’un nouveau contenu textuel. Si on tente de lui passer du balisage HTML comme on l’a fait dans l’exemple ci-dessus, les balises vont être neutralisées et s’afficher sous format texte.