Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SELECTION ET MODIFICATION D’ELEMENTS HTML AVEC JQUERY

Rappel concernant le DOM et la sélection d’éléments HTML en jQuery

Si vous avez suivi mon cours sur le JavaScript, vous devriez savoir ce qu’est le DOM et être à l’aise avec le concept de « manipulation du DOM ».

Pour rappel, le DOM (Document Object Model) est une interface créée lors du chargement d’une page web nous permettant via des scripts d’accéder au contenu HTML (et CSS) d’une page afin de le modifier de façon dynamique.

En d’autres termes, nous allons pouvoir modifier l’aspect d’une page HTML en manipulant le DOM en utilisant du JavaScript.

La libraire jQuery, justement, simplifie grandement le ciblage des éléments HTML en intégrant la syntaxe des sélecteurs CSS.

De plus, le jQuery nous fournit différentes méthodes pour interagir avec le DOM.

Nous allons donc pouvoir manipuler le DOM simplement et de manière puissante en utilisant le jQuery.

Les « getters » et les « setters » en jQuery

Généralement, les langages orientés objets intègrent deux grands types de méthodes : les méthodes « getters » (de « get », « obtenir ») et les méthodes « setters » (de « set », « définir »).

Par convention, les méthodes de type getter commencent par le préfixe « get » tandis que les méthodes de type setter commencent par le préfixe « set », pour faciliter leur distinction.

Par exemple, le JavaScript possède deux méthodes pour obtenir / accéder à un attribut HTML et pour le modifier / définir qui ont pour nom getAttribute() et setAttribute().

Le jQuery rend les choses encore plus simples : certaines méthodes jQuery ont été créées de manière à pouvoir servir à la fois de getter ou de setter selon le type d'arguments qu’on va leur passer.

Prenons l’exemple de la méthode css() que nous avons vu brièvement au cours des parties précédentes : si on ne lui fournit que le nom d’une propriété CSS en argument, cette méthode va se comporter comme une getter et se contenter d'afficher la valeur correspondant à la propriété.

En revanche, si on lui passe en plus une valeur en second argument, la méthode css() va attribuer cette valeur à la propriété CSS passée en premier argument.

Voyons immédiatement un exemple ensemble :

On utilise la méthode css() en tant que getter pour récupérer la valeur d’une propriété CSS

On affiche la valeur de font-size grâce au getter jQuery css()

Essayer ce code

Dans ce premier cas, la méthode css() se contente de nous renvoyer la valeur de la propriété font-size relative à notre élément h1.

On se charge ensuite de récupérer cette valeur dans une variable puis d’afficher le contenu de notre variable au sein d'un élément HTML span.

Pour maintenant modifier la taille du texte de notre élément h1, il suffit de préciser la valeur désirée comme second argument de notre méthode css() comme ceci :

On utilise la méthode jQuery css() pour définir une nouvelle taille de texte pour notre élément h1

On a utilisé la méthode css() en tant que setter jQuery

Essayer ce code

Ici, on commence par définir une nouvelle taille de texte pour notre élément h1, puis on récupère ensuite cette valeur dans une variable taille. On affiche finalement la valeur contenue dans notre variable.

Utilisation de la méthode text()

Nous avons eu recours à la méthode text() plusieurs fois depuis le début de ce cours sans jamais véritablement expliquer son fonctionnement ; nous allons donc le faire dès maintenant.

La méthode jQuery text() va nous permettre de lire le contenu textuel d’un élément (utilisation en tant que getter) ou de définir un nouveau contenu textuel pour un élément (utilisation comme setter).

Dans le cas de l'utilisation comme getter, nous utiliserons text sans argument. Si on souhaite l'utiliser comme setter, on précisera la nouvelle valeur à définir en argument de cette méthode.

On utilise la méthode text() pour lire et définir un contenu textuel

Nous aons bien modifié le contenu textuel de notre titre avec la méthode jQuery text()

Essayer ce code

Comme vous pouvez le voir, text() ne va récupérer / lire que le contenu textuel contenu dans un élément et ignorer toutes les balises HTML.

Ainsi, lorsqu’on récupère notre titre dans la variable titre, les balises correspondant à l’élément mark vont être ignorées.

De même, si on tente d’ajouter des balises lorsqu’on définit un nouveau contenu textuel, celles-ci ne vont pas être interprétées par le navigateur mais vont être affichées telles qu’elles.

Notez qu’on ne va pas pouvoir utiliser text() pour des éléments de formulaire (nous utiliserons la méthode val() à la place).

Découverte et utilisation de la métohde jQuery html()

La méthode html() est similaire à text(), à la différence près qu’elle va fonctionner avec tous les éléments et que cette fois-ci les éventuelles balises HTML présentes dans un élément ou définies dans le cas d'un changement de valeur vont bien être interprétées.

Illustrons cela en reprenant notre exemple précédent et en utilisant cette fois-ci la méthode html() à la place de text().

On récupère le contenu de notre élément avec la méthode jQuery html()

On définit un nouveau contenu pour notre élément h1 avec html()

Essayer ce code

Ici, on récupère l’intégralité de l’élément h1 grâce à la méthode html() (y compris les balises relatives à l'élément mark).

Ensuite, on définit un nouveau titre en modifiant la place des balises mark. On s’aperçoit que ces balises sont bien interprétées par le navigateur (elles n’apparaissent plus visuellement).

La même chose se produit lorsqu’on affiche ce que contient la variable titre avec html() : les balises sont bien interprétées, d’où le surlignage de l’abréviation « DOM ».

Découverte et utilisation de la méthode jQuery val()

La méthode val() est souvent utilisée pour récupérer le contenu d’éléments de formulaire tels que les éléments input, textarea ou encore select.

Dans le cas où on utilise val() avec l’élément select, cette méthode va renvoyer la valeur null si aucune option n’a été choisie ou un tableau si plusieurs options ont été choisies (ce qui est possible si on donne un attribut multiple à select).

Dans tous les cas, nous allons devoir utiliser les méthodes relatives aux formulaires vues précédemment afin d’afficher les valeurs en direct.

Dans le cas d’un champ de texte, la meilleure solution est certainement d’utiliser un gestionnaire d’évènements de type keyup, tandis qu’on préférera utiliser la méthode change() pour afficher les options d’un élément select choisies.

Voyons un exemple ensemble :

Utilisation de la méthode jQuery val() pour afficher les valeurs d’un formulaire

On affiche les valeurs du formulaire dynamiquement grâce à val() en jQuery

Essayer ce code

Dans cet exemple, on utilise donc un gestionnaire d’évènements keyup pour récupérer les valeurs entrées dans notre élément input. On stocke la valeur dans une variable qu’on affiche immédiatement au sein d’un premier élément span.

Pour afficher les options choisies dans notre liste select, on préfère utiliser la méthode change() qui ne va afficher que les options effectivement choisies et ne pas garder en mémoire les anciennes options cliquées.

Afin d’avoir un code tout à fait valide, on doit gérer les cas où l’utilisateur ne choisit aucune option ou une ou plusieurs options afin d’ensuite pouvoir utiliser la méthode join().

On utilise join() pour afficher les différentes valeurs contenues dans le tableau lui même contenu dans la variable valeurSelect.

La méthode val() va également pouvoir servir de setter pour un élément de formulaire, en précisant en argument une valeur pour un élément.

Cependant, cette utilisation de val() est plus rare et présente concrètement beaucoup moins d’intérêt.

Découverte et utilisation de la méthode attr()

On va déjà pouvoir utiliser la méthode attr() en tant que getter pour récupérer la valeur d’un attribut d’un élément. Dans ce cas, cette méthode va prendre en argument le nom de l’attribut dont on souhaite obtenir la valeur.

Dans le cas où l’on appliquerait attr() à une collection d’éléments (par exemple tous les éléments p de notre page possédant un attribut précis), attr() ne renverra que la valeur de l’attribut choisi du premier élément rencontré.

On va également pouvoir utiliser attr() comme setter, pour définir des attributs et leur attribuer une valeur, ou pour modifier les valeurs d’attributs déjà existants.

Dans ce cas, on passera en arguments de attr() un nom d’attribut et une valeur. Notez que l’on va également pouvoir définir plusieurs attributs et leurs valeurs d’un coup.

Voyons immédiatement un exemple pratique d’utilisation de la méthode attr().

On utilise la méthode jQuery attr() pour définir ou obtenir la valeur des attributs d’éléments HTML

Nous avons défini et changé les valeurs de certains attributs HTML avec attr() en jQuery

Essayer ce code

L’exemple ci-dessus ne devrait pas comporter de difficulté majeure pour vous. On commence par récupérer la valeur de l’attribut class de h1 en utilisant la méthode attr() avec en argument le nom de l’attribut dont on souhaite obtenir la valeur.

On place cette valeur dans une variable puis on affiche le contenu de la variable dans notre élément span grâce à la méthode text().

Ensuite, on modifie la valeur de l’attribut class de h2 en donnant deux arguments à attr() : le nom de l’attribut dont on souhaite définir la valeur et la valeur de remplacement.

Notez qu’on utilise un élément style en HTML pour donner une couleur bleue à tous nos éléments portant la class = 'titre' afin de bien voir les changements effectués.

Finalement, on ajoute deux attributs avec des valeurs à notre élément a. Notez bien la syntaxe qui est un peu différente lorsqu’on ajoute plusieurs attributs et valeurs d’un coup : celle-ci devrait vous faire penser à la syntaxe déjà utilisée avec la méthode on().

La méthode prop() : quand et comment l’utiliser

Avant la version 1.6 de jQuery, on ne faisait pas de différence entre une propriété du DOM et un attribut, et on utilisait la méthode attr() pour récupérer ou définir les valeurs des attributs et propriétés du DOM.

Cependant, depuis jQuery 1.6, cette distinction a de l’importance et va mener à l’utilisation de prop() plutôt que attr() et inversement.

Ce concept n’est pas évident à comprendre à priori, mais nous allons essayer de l’expliquer le plus simplement possible.

La première chose que vous devez comprendre est que certains attributs peuvent changer dynamiquement de valeur tandis que d’autres ne le peuvent pas.

Par exemple, lorsque vous passez un attribut class à un élément, la valeur de l'attribut class est fixe. En revanche, lorsque vous utilisez un attribut checked, la valeur de l’attribut peut changer dynamiquement selon que l’élément soit effectivement coché ou pas.

On va donc distinguer entre deux types de valeurs pour l’attribut checked : celle que nous avons donné à la base, c’est-à-dire celle présente lors de la génération de l’arbre DOM et la valeur dynamique.

Selon le W3C, l’attribut checked est un attribut booléen, ce qui signifie qu’il peut prendre deux valeurs : true ou false.

Typiquement, lorsqu’on définit en HTML un attribut checked = 'checked', la valeur booléenne correspondante va être true.

Ces deux valeurs possibles, true ou false, vont justement appartenir à ce qu'on va appeler plus exactement la propriété checked.

Je peux comprendre que cette distinction vous semble absurde. Pour faire très simple, retenez simplement dans le cas de checked que la valeur de l’attribut checked (c’est-à-dire checked) va être différente de celle de la propriété checked (à savoir true ou false).

Retenez également que la valeur de l’attribut checked ne va jamais changer (elle est fixe depuis la création du DOM) tandis que celle de la propriété checked va changer selon l’état de l’élément.

Dans ce cas là, nous utiliserons donc plutôt prop() que attr() pour récupérer ou définir la valeur actuelle liée à checked.

Au final, retenez simplement qu’on va utiliser prop() pour tous les attributs dont la valeur peut être changée de façon dynamique, comme checked, selected ou value.

Prenons un exemple pour bien illustrer la différence entre la valeur d’un attribut checked et celle de la propriété.

Utilisation de la méthode prop()

Les valeurs de l’attribut checked et de la propriété checked sont différentes

La valeur de la propriété checked change alors que celle de l’attribut checked reste la même

Essayer ce code

On remarque bien avec cet exemple que la valeur de la propriété checked est bien différente de celle de l’attribut checked et que cette première change selon que la boîte soit cochée ou non.

Chapitre précédent

Chapitre suivant