javascript - 为 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"

<小时/>

正如您在我发布的第一 block 代码中看到的，我使用 element.id 作为元素的唯一标识符，能够如上所示使用它。

我的问题是我的脚本对 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、类或其他属性？

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 元素本身成为关键，这样您就不需要不必创建字符串 key 。

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

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