title: Create a unique identifier for a DOM element
body: <p>I am creating an object that stores various elements and their CSS properties.</p>
  
  <p><strong>The code I have now:</strong></p>
  
  <pre><code>// 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;
  };
  </code></pre>
  
  <p><strong>Example:</strong></p>
  
  <pre><code>// 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");
  </code></pre>
  
  <p><strong>Now my Object is populated like so:</strong></p>
  
  <pre><code>cssStorage = {
      box: { // &lt;- box is the id of the HTML element &lt;div id = "box"&gt;&lt;/div&gt;
          // The property-value pairs
          display: "block",
          height: "74px"
      }
  };
  </code></pre>
  
  <p><strong>So now, if I type the code in the console:</strong></p>
  
  <pre><code>return cssStorage.box.display; // Returns "block"
  </code></pre>
  
  <hr>
  
  <p>As you saw in the first block of code I posted, I used <strong><code>element.id</code></strong> as the element's <strong><code>unique identifier</code></strong>, to be able to use it as shown right above.</p>
  
  <p>My problem is the dependency of my script upon <strong><code>element.id</code></strong>. Some elements of my DOM don't have an <strong><code>id</code></strong> and therefore the function is useless for these elements.</p>
  
  <hr>
  
  <p>In essence, what I want to achieve is to call the function <strong><code>store</code></strong> <strong>when my element doesn't have an <code>ID</code></strong> as follows:</p>
  
  <pre><code>// 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");
  </code></pre>
  
  <p><strong>Is there a unique identifier for every node in the DOM?</strong></p>
  
  <p>Something that I could use as the name of:</p>
  
  <pre><code>cssStorage = {
      [THE NAME]: {}
  };
  </code></pre>
  
  <p><strong>If not, how can I create a unique identifier for my elements, so that I can use the function as shown above without needing an id, class or other property that my element may not have?</strong></p>