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，但有些情况下这对于表示{{1}之间的关系很有用。 }}第

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。

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

5 个答案: