.prop() vs .attr() dans jQuery : analyse pas à pas avec exemples

Introduction : pourquoi ce sujet est-il si important ?

Si vous avez déjà écrit du code jQuery pour obtenir ou définir la valeur d'un attribut d'un élément HTML, vous avez certainement rencontré deux méthodes : .prop() et .attr(). À première vue, elles font la même chose. Mais en pratique, la différence entre elles est la source de centaines de bugs et de milliers de questions sur Stack Overflow.

Dans ce tutoriel pas à pas, nous allons enfin comprendre ce qui distingue .prop() et .attr() dans jQuery, quand utiliser l'une ou l'autre, et comment éviter les pièges. Nous allons écrire du code concret, observer le comportement réel du navigateur et mémoriser une règle simple.

Cet article n'est pas une documentation aride. C'est votre guide personnel sur l'un des sujets les plus déroutants de jQuery.

En bref : attributs vs propriétés

Avant de plonger dans le code, clarifions la théorie. Dans le DOM (Document Object Model), il existe deux concepts :

\n
• Attribut (attribute) — ce qui est écrit dans le code HTML. Par exemple, <input type="checkbox" checked="checked">. Les attributs sont toujours des chaînes de caractères.
\n
• Propriété (property) — ce qui est stocké dans l'objet de l'élément DOM après que le navigateur a lu le HTML. Les propriétés peuvent être de tout type de données : chaîne, booléen, nombre, objet.
\n

La méthode .attr() travaille avec les attributs. La méthode .prop() travaille avec les propriétés. Cela semble simple ? Oui, mais il y a des nuances.

Le piège principal : les attributs booléens

L'exemple le plus courant qui déroute les débutants concerne les cases à cocher, les boutons radio et autres éléments avec des attributs booléens (checked, disabled, selected, readonly).

Imaginez que vous ayez ce HTML :

<input type="checkbox" id="myCheckbox" checked>

Vous voulez vérifier si la case est cochée. Logiquement, vous écrivez ceci :

console.log( $('#myCheckbox').attr('checked') ); // "checked" (une chaîne !)\nconsole.log( $('#myCheckbox').prop('checked') ); // true (un booléen !)

Voilà la différence ! .attr() retourne la chaîne "checked" si l'attribut est présent dans le HTML, et undefined s'il est absent. Quant à .prop(), il retourne true ou false, en fonction de l'état actuel de l'élément dans le DOM.

Maintenant, le plus intéressant : que se passe-t-il si l'utilisateur décoche la case ?

// Après que l'utilisateur a décoché la case :\nconsole.log( $('#myCheckbox').attr('checked') ); // "checked" ! (le HTML n'a pas changé)\nconsole.log( $('#myCheckbox').prop('checked') ); // false (l'état a changé)

Voilà pourquoi utiliser .attr() pour vérifier l'état d'une case à cocher est une erreur. L'attribut checked dans le HTML reste inchangé, tandis que la propriété checked dans le DOM change dynamiquement. .prop() donne toujours la réponse actuelle.

La règle d'or

Il existe une règle simple pour vous aider à ne pas vous tromper :

\n
• Utilisez .prop() lorsque vous devez obtenir ou modifier l'état dynamique d'un élément (par exemple, checked, disabled, selected, value d'un input).
\n
• Utilisez .attr() lorsque vous devez lire ou modifier un attribut statique du HTML (par exemple, href, src, data-*, id, class).
\n

Souvenez-vous : .prop() est pour les propriétés qui changent pendant l'exécution. .attr() est pour les attributs définis dans le balisage.

Exemple pas à pas : travailler avec disabled

Analysons un autre cas classique : un bouton avec l'attribut disabled.

<button id="myButton" disabled>Cliquez-moi</button>