Deep Analysis and Comparison of .prop() vs .attr() Methods in jQuery

Fundamental Differences Between DOM Properties and HTML Attributes

Before delving into the .prop() and .attr() methods, it's essential to understand the fundamental distinction between DOM properties and HTML attributes. DOM elements exist as objects in memory with their own set of properties that reflect the element's current state. HTML attributes, on the other hand, originate from markup language and define the element's initial characteristics.

Consider this code example demonstrating the practical differences between properties and attributes:

// Accessing DOM property vs HTML attribute
const element = document.getElementById('example');
console.log(element.href);        // Shows full URL: "http://example.com/page.html"
console.log(element.getAttribute('href')); // Shows original attribute: "page.html"

Advantages and Use Cases of .prop() Method

The .prop() method is specifically designed for manipulating DOM properties, which is the more appropriate choice in most scenarios. Property values can be of any data type, while attribute values are limited to strings.

The following example demonstrates .prop()'s advantages when handling boolean attributes:

// Using .prop() for checkbox state management
$('#checkbox').prop('checked', true);  // Correctly sets checkbox to checked state
$('#checkbox').prop('checked');        // Returns boolean: true or false

// Contrast with .attr() limitations
$('#checkbox').attr('checked', 'checked');  // Sets attribute value
$('#checkbox').attr('checked');             // Returns string: "checked" or undefined

Special Handling of Style Properties

The style attribute mentioned in the original question serves as a classic example illustrating the fundamental difference in return values between .prop() and .attr():

$('#element').click(function() {
    const styleAttribute = $(this).attr('style');     // Returns string: "color: red; background: orange;"
    const styleProperty = $(this).prop('style');      // Returns CSSStyleDeclaration object
    
    // Using properties allows direct manipulation of specific styles
    styleProperty.backgroundColor = 'blue';           // Directly modifies background color
    console.log(styleProperty.color);                 // Outputs: "red"
});

jQuery Version Evolution and Compatibility Considerations

jQuery 1.6 introduced clear separation between properties and attributes, but version 1.6.1 made adjustments specifically for boolean attributes to maintain backward compatibility. This evolution reflects the jQuery team's balance between practical application and theoretical correctness.

For migrating existing code, follow these principles:

// Cases where .prop() should be used
$('#element').prop('disabled', true);      // Disables element
$('#element').prop('selected', true);      // Selects option
$('#element').prop('checked', true);       // Checks checkbox

// Cases where .attr() should be used
$('#element').attr('data-custom', 'value'); // Custom attributes
$('#element').attr('id', 'newId');          // ID attribute
$('#element').attr('class', 'newClass');    // Class attribute

Best Practices in Practical Development

Based on the fundamental differences between properties and attributes, developers should prioritize using .prop() in most scenarios, particularly when handling these types of properties:

• Boolean properties: checked, selected, disabled, etc.
• Numeric properties: selectedIndex, nodeType, etc.
• Object properties: style, defaultValue, etc.

Reserve .attr() for pure HTML attributes or custom attributes only. This distinction not only makes code clearer but also prevents potential issues caused by property/attribute confusion.