为 DOM 元素引用创建恒定时间数据结构答案

【问题标题】：Creating a constant time data structure for DOM element references为 DOM 元素引用创建恒定时间数据结构
【发布时间】：2011-11-26 12:55:06
【问题描述】：

Relevant discussion。

我知道我可以构建一个对元素/节点的引用数组。我还意识到我可以使用将数组视为堆的巧妙技巧（索引2n 和2n+1 用于儿童）来使用它构建一个（可能是浪费的）二叉搜索树。

但是对于我这个过早的优化器来说，这一切还不够。此外，实施 BST 将很容易出错。

这是我的问题。我可以以某种方式使用元素引用作为 javascript 哈希的索引（它们是对象，反之亦然？）。如果不是，我可以从元素引用中变出一个唯一的字符串，然后我可以将其用作我的哈希键吗？如果没有，jQuery 到底是如何做到的？

【问题讨论】：

你想达到什么目的？从 DOM 节点快速查找到您自己的数据结构？如果是这样，您始终可以将自定义属性附加到节点对象。
@AtesGoral，你是对的，这就是我想要实现的目标。我不知道属性和属性之间的区别。给定节点上的编辑属性是否会在该节点的整个生命周期内持续存在（因为它存在于文档中）？
我不能 100% 确定，但特定 DOM 节点的属性应该在该节点的生命周期内持续存在。我不知道在某些浏览器上是否有特殊情况导致新的 JS 对象被分配给现有的 DOM 节点...

标签： javascript

【解决方案1】：

最简单的选择是在 DOM 对象上使用您自己的属性：

var element = document.getElementById("test");
element.myData = "whatever";

以下是 jQuery 的 .data() 函数工作原理背后的总体思路，您可以在自己的纯 JavaScript 中使用。它在对象上使用一个自定义属性，然后将其他所有内容存储在由该自定义属性的值索引的数据结构中。

var idCntr = 0;   // global cntr

var data = {};
var element = document.getElementById("test");
var id = element.uniqueID;
if (!id) {
    id = idCntr++ + "";
    element.uniqueID = id;
}
data[id] = "whatever";


// then some time later, you can do this
var element = document.getElementById("test");
console.log(data[element.uniqueID]);   // whatever

在数据对象中存储给定对象的多个属性有点复杂，但这是大体思路。

而且，如果你可以使用 jQuery，那就很简单了：

$("#test").data("myData", "whatever");  // sets the data

console.log($("#test").data("myData"));   // retrieves the data

如果你想真正了解 jQuery 的 .data() 是如何工作的，你可以通过第一次调用来设置数据，然后在使用未缩小的 jQuery 时检索它。很容易看出它的作用。

【讨论】：