HTML數據屬性可以保存對DOM元素的引用嗎？

是否可以使用HTML data-屬性來保存對另一個DOM元素的引用。例如，可以做的jQuery：HTML數據屬性可以保存對DOM元素的引用嗎？

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像我起初做過，但有些情況下這可能有助於表示divs之間的關係。

來源

2014-02-28 J-bob

不能存儲的DOM元素本身，而是你可以存儲選擇字符串，然後傳遞到jQuery的。 – Ennui

您可以使用jQuery的'.data（）'方法存儲任何jQuery對象，但不會將其寫回到DOM。 – nullability

我認爲你的代碼是jQuery和JavaScript之間的交叉:) – redV

是的，沒有。您不能在data-屬性中存儲對DOM元素的引用。但是，您可以關聯的參照DOM元素使用jQuery .data()另一個元素，它已經在使用：

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

從jQuery documentation：

的。數據（）方法可以讓我們重視任何類型的數據以DOM 元素的方式從內存泄漏中以循環引用的方式安全，因此是。

注意，使用.data()設置數據將其添加到數據存儲，但沒有將其添加爲DOM中的data-屬性。但是，使用.data()讀取數據將檢查數據存儲以及data-屬性（如果存在並且沒有給定密鑰的數據存儲值）。

來源

2014-02-28 18:07:56 Zhihao

不合法，因爲屬性應該是文本字符串。但是，既然你使用jQuery，你可以使用.data()方法。

來源

2014-02-28 18:04:07

我不確定爲什麼downvote來回答這個問題？這個答案是正確的，對於已經低調的人，我想清楚地知道jQuery只是JavaScript的庫，它不是一門語言。在實際DOM中將DOM元素作爲屬性存儲是非法的或不允許的。 @Stephen是正確的 – redV

+1，因爲這是一個有效的答案。 – redV

不是直接。 data-*屬性只是屬性，所以你只能在其中存儲一個字符串。

但是，當然，您可以存儲目標元素的ID或類，以便稍後檢索它。

或者你也可以在元素中存儲對元素的引用，因爲屬性可以有任何值。

來源

2014-02-28 18:05:05 Oriol

爲什麼downvote？如果我的回答在某些方面不正確，我想知道。 – Oriol

也很好奇。 OP詢問它是否可以存儲在「HTML數據屬性」中，而不是數組或另一個對象。因此它是一個明確的否定。 – user13500

@ user13500當有人問你散步過海時，我會說你不能走過海，但你可以用小船代替。沒什麼不對的:) – redV

這不是答案，因爲沒有元素可以將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 a s的數據一些元素

然後在下面的方法檢索使用取回

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

因爲沒有存儲元素數據AFAIK沒有直接的方法。

來源

2014-02-28 18:13:43 redV

''ele'+ counter'沒有必要。對於這個問題，你可以使用一個普通的數組並將索引返回爲一個字符串 - 不需要亂用計數器。 ;）（有點像模擬一個指針值） –

jQuery .data()基本上爲你做的一切。

但是，如果您不能使用jQuery，或者必須實現更多特定於案例的事情，則可以將索引保存到包含實際數據的全局對象。這樣你就可以支持你需要的任何類型的數據，引用，對象，函數（甚至綁定函數）。

下面是數據的一個香草實現，雖然我不確定你的限制是什麼 - 你可能想要改變下面一些代碼。請注意，此代碼中的元素通過使用其標識進行標識。

// 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/

來源

2016-09-01 10:36:37 oriadam

HTML數據屬性可以保存對DOM元素的引用嗎？

回答

相關問題