Difference Between jQuery .data() and .attr('data-*')

While both jQuery methods can read HTML5 data-* attributes, .attr('data-*') interacts directly with the live Document Object Model (DOM) as raw strings, whereas .data() pulls the initial value into jQuery's internal memory cache, automatically casts data types, and decouples subsequent updates from the DOM. Understanding how they handle storage, type conversion, and DOM updates is essential for writing predictable, high-performance jQuery code.

1. DOM Access vs. Internal Memory Cache

  • .attr('data-*') directly reads from and writes to the DOM. Every time you call .attr(), jQuery queries the DOM element. Any value written with .attr('data-key', 'value') updates the element's actual HTML markup, making changes visible in browser developer tools (Elements panel).
  • .data() uses an internal cache. The first time .data('key') is called, jQuery reads the corresponding data-key attribute from the DOM and stores it in memory. Any subsequent reads or writes with .data('key', 'new-value') affect only jQuery's internal cache. The underlying DOM attribute remains unchanged.

2. Data Type Parsing (Type Coercion)

  • .attr() always returns a string. Regardless of whether the attribute contains a number, boolean, or JSON string, .attr() returns the raw string value as written in the HTML.
  • .data() automatically converts types. jQuery attempts to convert the extracted string into its native JavaScript type:
    • "true" and "false" become booleans.
    • "123" becomes a number.
    • Valid JSON strings (like '{"id": 1}') are automatically parsed into JavaScript objects.

3. Key Naming and Hyphenation

  • .attr() requires the exact attribute name. You must specify the full attribute string, including the data- prefix and any hyphens (e.g., $('#elem').attr('data-user-id')).
  • .data() strips prefixes and supports camelCase. jQuery strips the data- prefix automatically. It also converts hyphenated names to camelCase. An attribute defined as data-user-id can be retrieved using either .data('user-id') or .data('userId').

4. Performance Considerations

  • .data() is faster for frequent updates. Because it operates on an in-memory JavaScript object rather than constantly reading from or writing to the DOM tree, .data() provides better performance in data-heavy or repetitive operations.
  • .attr() is required when CSS selectors or DOM visibility matter. If other scripts, CSS attribute selectors (e.g., [data-status="active"]), or styling rules rely on the attribute presence in the HTML, you must use .attr() to ensure the DOM is updated.