HTML 数据属性是否可以保存对 DOM 元素的引用

Question

HTML

data-属性是否可以保存对另一个 DOM 元素的引用？例如，我可以用jQuery来做到这一点：

var domel1 = document.getElementById("#mydiv")
var domel2 = document.getElementById("#mydiv2")
$(domEl1).attr('data-domel', domel2)

然后稍后，使用jQuery，我会做：

var domel1 = document.getElementById("#mydiv")
var domel2 = $(domel2).data('domel')
$(domel2).html("blahblahblah")

这似乎是一个微不足道的例子，因为我可以像最初一样用相同的id引用domel2，但在某些情况下，这对于表示<div>之间的关系很有用。

Answer 1

是和否。不能在 data- 属性中存储对 DOM 元素的引用。但是，您可以使用 jQuery .data() 将 DOM 元素的引用关联到另一个元素，这些元素已经在使用：

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

来自 jQuery 文档：

.data（） 方法允许我们将任何类型的数据附加到 DOM 元素，使其免受循环引用的影响，因此 从内存泄漏。

请注意，使用 .data() 设置数据会将其添加到数据存储中，但不会将其添加为 DOM 中的data-属性。但是，使用 .data() 读取数据将检查数据存储以及 data- 属性（如果存在并且给定键没有数据存储值）。

Answer 2

不是直接的。 data-*属性只是属性，因此只能在其中存储字符串。

但是，当然，您可以存储目标元素的 id 或类，以便以后检索它。

或者，您也可以在属性中存储对元素的引用，因为属性可以具有任何值。

Answer 3

不合法，因为属性应该是文本字符串。但是由于你使用的是jQuery，你可以改用.data()方法。

Answer 4

jQuery .data()基本上可以为你做所有事情。

但是，如果您不能使用 jQuery，或者必须实现更特定于大小写的内容，则可以将索引保存到保存实际数据的全局对象。通过这种方式，您可以支持所需的任何类型的数据、引用、对象、函数（甚至是绑定函数）。

这是一个普通的数据实现，尽管我不确定您的限制是什么 - 您可能需要更改下面的一些代码。请注意，此代码中的元素是使用其 id 标识的。

// Set data with: elem.data('key',anything)
// Get data with: elem.data('key')
// Remove data (kind of) with: elem.data('key',undefined)
// This will generate random id on element if id is missing
Node.prototype.force_id = function() {
    return this.id || (this.id = ('' + Math.random()).replace('0.', 'id-'));
}
// Our own data implementation
window.DATAOFDOM = {}; // I like naming globals as ALLCAPS
Node.prototype.data = function(k, v) {
    if (arguments.length == 1) {
        // getter
        if (window.DATAOFDOM[this.id]) {
            return window.DATAOFDOM[this.id][k]; // returns undefined when k isn't there
        }
        // else: implicitly returns undefined when there's no data for this element
    } else {
        // setter
        this.force_id();
        if (!window.DATAOFDOM[this.id])
            window.DATAOFDOM[this.id] = {};
        return window.DATAOFDOM[this.id][k] = v;
    }
}

https://jsfiddle.net/oriadam/63zn9qtd/

Answer 5

这不是

一个答案，因为没有元素可以将 DOM 元素存储为属性值。这是一个小的填充物来做同样的事情

如果我有同样的要求，我会遵循这种方法，

 var DataDOM = (function(){
     function DataDOM(){}
     var elements = {}, counter = 0;
     DataDOM.prototype.set = function(ele){
         elements['ele' + counter] = ele;
         counter += 1;
         return ele + (counter - 1);
     }
     DataDOM.prototype.get = function(eleRef){
         return elements[eleRef];
     }
     return DataDOM;
 })();

像下面这样使用

 var dDOM = new DataDOM();

例如，如果我想将 DOM 引用设置为元素数据属性

var div = document.getElementById('someId');
var attr = dDOM.set(div);

然后将attr设置为某个元素的数据

然后在检索时使用以下方法将其取回

 var referedElement = dDOM.get(someElement.attr('data')); 

因为没有直接的方法可以将元素存储为数据 AFAIK。