Home/ Questions/Q 6078983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T10:53:42+00:00

I’d like to create a correlation between data and DOM nodes. I tried to

  • 0

I’d like to create a correlation between data and DOM nodes. I tried to directly create a Object, with the nodes as properties, but it looks like only the string representations of the nodes are used.

To make the problem more concrete, let’s say I have the below document, and I want to associate the first div with the number 3, and the second div with the list ['x', 'y', 'z'], how would you do this? 

<html> <body>
<div/>
<div/>
( 100 more divs )
</body> </html>

I see that jQuery has a .data() method just for doing this. Is that the only way? This seems like such a fundamental operation that I had expected to do it with plain-old javascript.

The intent is to register an onclick event with these nodes, and have the data on hand.

window.onload = function() {
    var index2data = { 0:3, 1:['x', 'y', 'z'] };
    var divs = document.getElementsByTagName("div");
    for(var i = 0; i < divs.length; i++){
        setData( divs[i], index2data[i] )
        divs[i].onclick = onClick;
    }
}

function onClick() {
    var data = getData( this );
    // do a bunch more stuff
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In order of keeping the actual data separate from the DOM you can try to set div IDs for all elements by script – in doing so you should test if any div already has an id and use that instead in order of not breaking things…

    var obj={};
function setDivIdsAndData(dataToSet)
{
    var divs = document.getElementsByTagName("div");
    for(var i = 0; i < divs.length; i++)
    {
       var divId="d"+i;
       if (divs[i].getAttribute("id")==null)
           divs[i].setAttribute("id",divId);
       else
           divId=divs[i].getAttribute("id");
       obj[divId]=dataToSet[i];
    }
};

    And now applied to your example case:

    window.onload = function() 
{
    var index2data = { 0:3, 1:['x', 'y', 'z'] };
    setDivIdsAndData(index2data);
};

function onClick() 
{
    var data = obj[this.getAttribute("id")];
    // do a bunch more stuff
};
    • 0