Javascript 为DOM元素创建唯一标识符

我正在创建一个存储各种元素及其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"

示例：

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

现在我的对象是这样填充的：

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

---

正如您在我发布的第一段代码中看到的，我使用

元素.id

作为元素的

唯一标识符，以便能够使用它，如上图所示

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


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

// 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、类或其他属性的情况下使用如上所示的函数？
您可以轻松地为任何尚未具有唯一标识符的元素创建唯一标识符：

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

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

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

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


如果您使用的是ES6，那么您也可以使用
WeakMap
或
Map
对象作为CSS存储机制，它让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"
}

var cssStorage=newmap（）；
cssStorage[elem]={//您可以使用整数来处理序列，并将id设置为不包含它的元素，使用前缀以避免重复（例如“myid”+idSequence++）.
请检查这是否有效。基本上是尝试克隆原始元素，并在使用random generator添加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;
};

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