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")

这可能看起来像一个微不足道的例子，因为我可以像我最初那样用domel2引用id，但有些情况下这可能有助于表示<div>s之间的关系。

Answer 1

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

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

来自jQuery documentation：

.data（）方法允许我们以一种不受循环引用安全的方式将任何类型的数据附加到DOM元素，从而避免内存泄漏。

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

Answer 2

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

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

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

Answer 3

不合法，因为属性应该是文本字符串。但是因为你正在使用jQuery，你可以使用.data()方法代替。

Answer 4

jQuery .data()基本上为你做了一切。

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

这是一个vanilla实现的数据，虽然我不确定你有什么限制 - 你可能想要改变下面代码的一些部分。请注意，此代码中的元素是使用其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元素存储为属性值。这是一个小的polyfill做同样的事情

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

 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')); 

因为没有直接的方法将元素存储为Data AFAIK。