Can the HTML data attribute hold a reference to a DOM element?

Not directly. data-* attributes are just attributes, so you can only store a string in them.

But, of course, you can store the id or class of your target element, in order to retrieve it later.

Or you could also store a reference to the element in a property, since properties can have any value.


Yes and no. You cannot store a reference to a DOM element in a data- attribute. However, you can associated a reference to a DOM element to another element using jQuery .data(), which are already using:

$someElement.data('name', someOtherElement);

From the jQuery documentation:

The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

Note that using .data() to set data will add it to the data store but not add it as a data- attribute in the DOM. However, using .data() to read data will check the data store as well as the data- attribute (if one exists and there's no data store value with the given key).