從DOM對象到我的對象/數據的直接引用？

// my object 
function myObject(id) { 
    this.id = id; 
} 

var parent = document.getElementById('parent'); 
var myObjects = []; 

for(i = 0; i < someCount; i++) { 
    var id = someData[i].id; // unique value 
    var oobject = new myObject(id); 
    myObjects.push(oobject); 

    // div element 
    var div = document.createElement('div'); 
    div.id = id; // note how div id is same as id property - these two are in "pairs" a.k.a the data from that object is meant for that div 
    div.className = 'my-div'; 
    parent.appendChild(div); 
}

我有哪些選擇？如何從DOM對象直接引用我的對象？從DOM對象到我的對象/數據的直接引用？

這甚至不必是單獨的對象，我只需要存儲一些數據，我可以通過DOM元素直接訪問/ O（1）。

數據動態，經常在我看來
有太多的數據爲data-屬性和Im擔心它會導致一些問題
適用於所有現代瀏覽器（也隱形模式排除了localStorage改變）和手機 - 不是大加localStorage

我需要能夠獲取/設置我的數據時，DOM元素被點擊沒有任何討厭的數組迭代或只使用一些屬性的值（如ID例如上文）尋找正確的對象。

我看着我加入自己的屬性/數據，以DOM對象本身但所有我能找到的，這是非常糟糕的主意。這些帖子年齡較大（2008年至2011年），2016年情況如何？關於這一點的信息極少。這將是最簡單的，我只需要1行：myDiv.addEventListener('click', function(e){ var id = e.currentTarget.myObject.id; }
我還可以指定DOM對象我自己的目標，但據我所知，我找不到任何信息，否則，指出：有沒有辦法直接獲取對象由它的屬性又名在對象的層次結構中向上移動。

來源

2016-02-02 Solo

爲什麼不參考存儲的DOM元素，因爲它是'oobject.element = DIV;'？ –

@ c-smile這就是我原來的。但是，我怎麼從** DOM元素_（而不是其他方式）直接訪問我的對象**而沒有任何迭代或其他O（n）操作？ – Solo

也放回參考：'oobject.element = div; div.data = oobject; DOM元素是一個JS對象，因此您可以爲其分配屬性。請參閱：http：//javascript.info/tutorial/attributes-and-custom-properties#properties –

在O（1）中執行此操作並且不更改DOM節點的一種方法是將對象字面量用作將節點鏈接到對象的Map（散列）。

您已經設置你的DOM元素的id屬性，所以你可以使用每個節點的ID爲重點，以連接到相應的myObject：

var map = {}; // create the map. map[domNodeID] = appropriate myObject 

for(i = 0; i < someCount; i++) { 
    var id = someData[i].id; 
    var oobject = new myObject(id); 

    // div element 
    var div = document.createElement('div'); 
    div.id = id; 
    div.className = 'my-div'; 
    parent.appendChild(div); 

    // link node and object through the map 
    map[id] = oobject; 
}

然後你可以使用地圖只是參考對象：

myDiv.addEventListener('click', function(e) { 
    var oobject = map[this.id]; // O(1) lookup 
    // use your object 
}

還有一個內置的對象用於此目的稱爲Map，這可能會比使用對象文本更好，但它取決於你需要瀏覽器的支持。 Map確實允許使用對象作爲鍵以及爲字符串，所以你可以在技術上節點直接的ID鏈接到一個對象，而無需：

map.set(node, oobject)

此外，而不是使用像map[key] = value直接訪問，也許你可以將方法添加到您的自定義地圖中，該方法使用與Map方法相同的名稱，例如map.set(key, value)以確保稍後輕鬆切換到Map。

來源

2016-02-02 18:16:25 nem035

謝謝你的偉大答案。所有這些看起來都非常有用和令人興奮，我還沒有在編碼中使用過映射 - 現在進行大量研究和研究。乾杯! – Solo

@Solo沒問題的隊友，很高興幫助:) – nem035

從DOM對象到我的對象/數據的直接引用？

回答

相關問題