Accéder au DOM HTML et sélectionner des éléments en jQuery

Dans cette nouvelle partie, nous allons comprendre pourquoi jQuery est une option de choix pour des opérations de manipulation du DOM HTML et allons présenter les différents outils offerts par jQuery pour sélectionner, insérer, modifier ou supprimer des éléments ou des attributs ainsi que pour modifier les styles CSS des éléments.

 

Rappels sur le DOM

Le DOM (Document Object Model ou Modèle Objet de Document en Français) est une interface créée automatiquement par le navigateur lors du chargement d’une page HTML.

Cette interface offre une représentation structurée et hiérarchisée d’un document HTML en le présentant sous forme d’arbre (on parle de “DOM tree”) avec l’élément html servant de tronc ou de “racine”, les éléments enfants de html formant les premières branches de l’arbre, et les descendants de ces éléments formant des ramifications successives et etc.

Le DOM est une interface très intéressante pour un développeur Javascript puisqu’on va pouvoir utiliser cette interface en JavaScript pour accéder aux différents contenus HTML d’un document et pour les manipuler. Cela va être très utile dans le cas où on souhaite modifier le contenu ou l’apparence d’une page suite à certaines actions d’un utilisateur ou évènements.

Imaginons par exemple qu’on souhaite laisser à l’utilisateur la possibilité de changer la couleur de fond de notre site en cliquant sur un bouton, ou encore qu’on veuille proposer des contenus qui vont se déplier / replier lors d’un clic : tout cela ne va être possible qu’en manipulant le DOM.

La manipulation d’un document en JavaScript n’est généralement pas très complexe mais peut parfois produire des résultats inattendus ou, dans certains cas, nous forcer à écrire des scripts relativement longs.

jQuery a pour objectif de nous simplifier l’accès au DOM et à la manipulation d’un document en nous fournissant des sélecteurs et des méthodes qui vont s’avérer très puissants et très simples d’utilisation.

 

La sélection d’éléments en jQuery

La façon la plus simple de sélectionner des éléments HTML en jQuery va être d’utiliser des sélecteurs CSS. En effet, je vous rappelle ici que jQuery simplifie grandement la sélection d’éléments en supportant l’intégralité des sélecteurs CSS.

De plus, jQuery met également à notre disposition des “pseudo-sélecteurs” qui vont nous permettre de sélectionner précisément et simplement certains éléments spécifiques aux formulaires HTML.

On va notamment pouvoir sélectionner des éléments input en fonction de la valeur de leur attribut type grâce aux pseudo-sélecteurs jQuery :text, :password, :checkbox, :radio, :submit, :file, :image, :button et :reset.

jQuery nous permet également de sélectionner certains éléments de formulaire en fonction de leur état. Pour cela, on utilisera les pseudo-sélecteurs :

• :input pour cibler tous les éléments input, textarea, select et button ;
• :checked pour cibler les éléments cochés ou sélectionnés pour des input type="checkbox", input type="radio" et des éléments de liste select ;
• :selected pour cibler les éléments option sélectionnés dans une liste select ;
• :disabled pour cibler les éléments input qui possèdent un attribut disabled ;
• :enabled pour cibler tous les éléments qui ne possèdent pas d’attribut disabled.

Enfin, jQuery nous fournit également quelques méthodes qui vont nous permettre d’affiner nos sélections. On peut notamment ici citer les méthodes has(), filter(), not(), first(), last() et eq().

La méthode jQuery has()

La méthode jQuery has() va nous permettre d’affiner une sélection en ne sélectionnant que les éléments d’une sélection initiale qui possèdent des éléments enfants correspondant au sélecteur passé en argument de cette fonction.

Cette méthode renvoie un objet jQuery qui contient la sous-sélection.

On va ainsi par exemple pouvoir sélectionner uniquement les éléments p de notre page qui contiennent un élément span.

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

Ici, j’utilise la méthode css() pour modifier la couleur des éléments sélectionnés par has() afin de les mettre en relief. Nous étudierons cette méthode en détail plus tard.

La méthode jQuery filter()

La méthode jQuery filter() va nous permettre d’affiner une sélection en ne sélectionnant que les éléments qui satisfont au sélecteur passé en argument de cette fonction.

On va ainsi par exemple pouvoir ne sélectionner que les éléments span d’une page qui possèdent un certain attribut class.

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

La méthode jQuery not()

La méthode not() va nous permettre de soustraire d’une sélection de départ des éléments qui répondent à un certain critère.

On va ainsi par exemple pouvoir supprimer d’une sélection les éléments span possédant un certain attribut class et appliquer des styles à tous les span sauf à ceux possédant cet attribut class.

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

Les méthodes jQuery first(), last() et eq()

Les méthodes first() et last() vont nous permettre d’affiner une sélection en ne sélectionnant respectivement que le premier et le dernier élément de la sélection de départ.

La méthode eq() va elle nous permettre de ne sélectionner qu’un élément dans une sélection de départ en fonction de sa place dans cette sélection. Elle est donc plus flexible que first() ou last().

Pour sélectionner un élément en fonction de sa position dans la collection de départ, nous allons devoir fournir un index (ou indice) à eq(). Ici, il faut simplement retenir que le premier élément de la collection de départ possède l’indice 0, le deuxième l’indice 1, le troisième l’indice 2, etc.

Pour sélectionner le deuxième élément de notre sélection de base, on écrira donc eq(1).

Vous pouvez également noter qu’on va pouvoir passer des indices négatifs à eq(). Dans ce cas, la sélection se fera en partant de la fin : eq(-1) permettra de sélectionner le dernier élément de notre sélection de départ, eq(-2) l’avant dernier élément, etc.

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