为 DOM 元素创建唯一标识符答案

【问题标题】：Create a unique identifier for a DOM element为 DOM 元素创建唯一标识符
【发布时间】：2017-12-05 13:00:24
【问题描述】：

我正在创建一个存储各种元素及其 CSS 属性的对象。

我现在拥有的代码：

// My object
var cssStorage = {};

function store(element, cssProperty, value) {
    // Initialize the (sub-)objects if they don't exist
    cssStorage[element.id] = cssStorage[element] || {};
    cssStorage[element.id][cssProperty] = cssStorage[element][cssProperty] || {};

    // Set the cssProperty to equal the value
    cssStorage[element.id][cssProperty] = value;
};

示例：

// My element
var box = document.getElementById("box");

// Let's call the function twice to save to properties
store(box, "display", "block");
store(box, "height", "74px");

现在我的对象填充如下：

cssStorage = {
    box: { // <- box is the id of the HTML element <div id = "box"></div>
        // The property-value pairs
        display: "block",
        height: "74px"
    }
};

现在，如果我在控制台中输入代码：

return cssStorage.box.display; // Returns "block"

正如您在我发布的第一段代码中看到的那样，我使用 element.id 作为元素的 unique identifier，以便能够使用它，如右图所示以上。

我的问题是我的脚本依赖于 element.id。我的 DOM 的某些元素没有 id，因此该函数对这些元素无用。

本质上，我想要实现的是在我的元素没有ID时调用函数store，如下所示：

// Some ways to get an element
var box = document.getElementsByClassName("boxes")[0];
var box = document.getElementsByTagName("div")[0];
var box = document.getElementsByName("jack")[0];

// It'll show an error, as the function uses 'element.id' and my element doesn't have one
store(box, "display", "block");

DOM 中的每个节点是否都有唯一标识符？

我可以用作以下名称的东西：

cssStorage = {
    [THE NAME]: {}
};

如果没有，我如何为我的元素创建一个唯一标识符，这样我就可以使用如上所示的函数而不需要我的元素可能没有的 id、类或其他属性？

【问题讨论】：

在我的脑海中，您可以生成一个 guid 并将其作为数据属性分配给该元素，例如data-guid（尽管如果页面更改，这不会持续存在）是否需要持久性？
你是 angular 吗？自定义指令怎么样？
@DBS 不，一点也不。只要两个元素的元素不相同，它就可以每次设置一个不同的元素。
@IndraUprade Vanilla JavaScript。没有框架:)
只看了一眼代码...something.[someProp] 错了。如果someProp 是变量，则需要something[someProp]；如果“someProp”是属性的实际名称，则需要something.someProp。

标签： javascript html

【解决方案1】：

您可以轻松地为任何还没有唯一标识符的元素创造一个唯一标识符：

var customIDprefix = "__myCustomPrefix__";
var customIDcntr = 0;

function getNextID() {
    return customIDprefix + customIDCntr++;
}

然后，您可以确保您使用的任何元素都有唯一的 ID：

function checkID(elem) {
    if (!elem.id) {
        elem.id = getNextID();
    }
}

如果您使用的是 ES6，您也可以只使用 WeakMap 或 Map 对象作为您的 CSSStorage 机制，它让 DOM 元素本身成为键，因此您不必创建字符串键。

在这种情况下，您只需这样做：

var cssStorage = new Map();

cssStorage[elem] = { // <- elem (your DOM element itself) becomes your key into the cssStorage
    // The property-value pairs
    display: "block",
    height: "74px"
}

【讨论】：

【解决方案2】：

您可以使用整数来处理序列并将 id 设置为没有它的元素，前缀以避免重复（例如 'myid' + idSequence++ ）。

【讨论】：

【解决方案3】：

请检查这是否有效。基本上试图克隆原始元素并在使用随机生成器添加 id 后将其分配回原始元素。

function store(element, cssProperty, value) {

if ( element.id == undefined ) {
  var clonedElem = element.cloneNode(true);
  clonedElem.id = Math.floor((Math.random() * 1000) + 1);
  element = clonedElem;
}
    // Initialize the (sub-)objects if they don't exist
    cssStorage.[element.id] = cssStorage[element] || {};
    cssStorage.[element.id][cssProperty] = cssStorage.[element][cssProperty] || {};

    // Set the cssProperty to equal the value
    cssStorage.[element.id][cssProperty] = value;
};

【讨论】：