为DOM元素创建唯一标识符

Question

我正在创建一个存储各种元素及其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，因此这些元素的功能是无用的。

---

在本质上，我要实现的是调用函数store当我的元素没有一个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，类或其他属性？

Answer 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元素本身是关键，所以你d不必制作一个字符串键。

在这种情况下，你只是这样做：

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

Answer 2

你可以使用一个整数来处理序列和ID设置为没有它的元素，添加前缀以避免重复（例如'myid'+ idSequence ++）。

Answer 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; 
};