Distinction entre Attributs HTML et Propriétés DOM

En jQuery, les méthodes attr() et prop() permettent toutes deux de manipuler les caractéristiques d'un élément, mais elles ciblent des couches différentes. Le terme attribute (attribut) désigne les valeurs définies directement dans le code source HTML, tandis que properyt (propriété) fait référence à l'état de l'objet dans l'arbre DOM (Document Object Model) géré par JavaScript.

<!-- "id", "class" et "data-role" sont des attributs HTML -->
<div id="container" class="active" data-role="wrapper"></div>

<script>
    // En JavaScript, cet élément est un objet avec des propriétés
    var element = document.getElementById("container");
    // element.id est une propriété
    // element.className est une propriété correspondant à l'attribut class
</script>

Quand privilégier attr()

La méthode attr() s'appuie sur les fonctions natives getAttribute() et setAttribute(). Elle est recommandée dans les situations suivantes :

• Manipulation d'attributs personnalisés qui ne font pas partie des propriétés standards du DOM (ex: data-*).
• Récupération de la valeur initiale définie dans le code HTML au chargement de la page.
• Cas où l'attribut HTML et la propriété DOM portent des noms différents (comme class en HTML et className en DOM).

Quand privilégier prop()

Introduite avec jQuery 1.6, la méthode prop() manipule directement les propriétés de l'objet JavaScript. Elle est indispensable pour :

• Les états booléens des éléments de formulaire tels que checked, selected et disabled.
• Accéder aux propriétés intrinsèques du nœud comme tagName, nodeName ou selectedIndex.
• Récupérer la valeur dynamique et actuelle d'un état (ex: savoir si une case est cochée à l'instant T).

// Exemple avec une case à cocher
var $checkbox = $('#terms-conditions');

// Retourne "checked" (la valeur écrite dans le HTML)
console.log($checkbox.attr('checked')); 

// Retourne true ou false (l'état réel de l'élément)
console.log($checkbox.prop('checked')); 

// Pour modifier l'état dynamiquement
$checkbox.prop('checked', true);

Gestion des formulaires avec val()

Bien que attr() et prop() puissent parfois interagir avec la valeur d'un champ, jQuery propose la méthode val() comme interface spécialisée pour les éléments de formulaire (input, select, textarea). Elle uniformise les comportements entre les différents navigateurs.

// Extraction de données
var login = $('#user-login').val();
var country = $('#country-list').val();

// Attribution de valeurs
$('#email-field').val('test@example.com');

// Sélection multiple
$('#category-select').val(['tech', 'science', 'news']);

// Utilisation d'une fonction de rappel (callback)
$('#price-input').val(function(index, currentValue) {
    return parseFloat(currentValue) * 1.2; // Applique une taxe de 20%
});

Comparaison technique des valeurs de retour

Une différence majeure réside dans le type de données retournées. attr() renvoie systématiquement une chaîne de caractères (String) ou undefined si l'attribut n'existe pas. À l'niverse, prop() peut retourner n'importe quel type JavaScript (Boolean, Number, Object, etc.).

var $btn = $('#submit-btn');

// attr() -> String "disabled" ou undefined
if ($btn.attr('disabled') === 'disabled') { 
    // Logique...
}

// prop() -> Boolean true ou false
if ($btn.prop('disabled')) {
    // Logique plus directe...
}