Question

我想在数据和DOM节点之间创建关联。我尝试直接创建一个Object，将节点作为属性，但看起来只使用了节点的字符串表示。

为了使问题更具体，让我说我有以下文档，我想将第一个div与数字3相关联，第二个div与列表相关联['x', 'y', 'z']，你会怎么做？

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

我看到jQuery只有.data()方法才能这样做。这是唯一的方法吗？这似乎是一个基本的操作，我原本期望用普通的javascript来做。

目的是为这些节点注册onclick事件，并掌握数据。

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
}

Answer 1

您可以使用针对它的JSON编码数据设置属性。在我提供的示例中，我使用启动JavaScript添加数据，但是没有理由在服务器提供的标记中不应该这样做。

然后getData方法只读取属性，JSON解析它：

function getData(el) {
  return JSON.parse(el.getAttribute('data-stuff'));
}

请注意，我刚刚调用了数据属性'data-stuff' - 因为data- *属性是一个有效的HTML5 - 显然更恰当地命名它。

没有jQuery的工作示例：http://jsbin.com/opugax/edit

使用jQuery的工作示例：http://jsbin.com/opugax/2/edit

请注意，如果您不想使用jQuery，并且想要支持IE7及更低版本 - 您需要在页面中包含json2.js：https://github.com/douglascrockford/JSON-js

Answer 2

为了保持实际数据与DOM分离，你可以尝试通过脚本为所有元素设置div ID - 这样做你应该测试任何div是否已经有一个id并使用它而不是破坏东西...

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

现在适用于您的示例案例：

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

Answer 3

从技术上讲，这很简单，但我不确定这是否是实现总体目标的最佳方式。

DOM是可扩展的。

向元素添加数据所需的只是在创建元素时或之后将其分配给DOM对象。以下是使用元素ID引用它的后续示例：

var divObj = document.getElementById('link1');
divObj.data = ['1', '2', '3'];

数据不是元素的HTML属性，而是DOM的节点扩展，可以包含任何类型的数据，包括函数/方法。

访问和处理此数据就像在上面指定一样简单：

var divObj = document.getElementById('link1');
doSomething(divObj.data);

您的目标是使用事件处理程序访问它，这取决于您分配事件的方法。我使用更现代的obj.addEventListener和obj.attachEvent（MSIE）。获取单击的目标对象与简单的obj.onclick（）赋值略有不同，但访问数据是相同的。

Answer 4

div节点的集合是有序列表 - 源代码顺序。使用数组来保存数据并为数据分配相同的索引div。

var dom= /*[parent]*/.getElementsByTagName('div'),
data= // reference the data array.
L= Math.min(data.length,dom.length),
next;

while(L){
next= data[--L];
if(next!= undefined) dom[L].setAttribute('data-association', next);

将节点映射到数据

4 个答案: