Javascript 将节点映射到数据_Javascript_Dom_Associative Array

Javascript 将节点映射到数据

javascript dom

Javascript 将节点映射到数据,javascript,dom,associative-array,Javascript,Dom,Associative Array,我想在数据和DOM节点之间创建关联。我试图直接创建一个对象，将节点作为属性，但看起来只使用了节点的字符串表示为了使问题更具体，假设我有下面的文档，我想将第一个div与数字3，第二个div与列表['x'，'y'，'z']，您将如何做 <html> <body> <div/> <div/> ( 100 more divs ) </body> </html> （100多个分区）我看到jQuery有一个方法可以实现这一点。

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

为了使问题更具体，假设我有下面的文档，我想将第一个

div

与数字

，第二个

div

与列表

['x'，'y'，'z']

，您将如何做

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


（100多个分区）

我看到jQuery有一个方法可以实现这一点。这是唯一的办法吗？这似乎是一个非常基本的操作，我原本希望用普通的老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
}

window.onload=function（）{
var index2data={0:3，1:['x'，'y'，'z']}；
var divs=document.getElementsByTagName（“div”）；
对于（变量i=0；i

为了将实际数据与DOM分开，您可以尝试通过脚本为所有元素设置div id-在这样做的过程中，您应该测试是否有任何div已经有了id，并使用该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];
    }
};

您可以设置一个带有JSON编码数据的属性。在我提供的示例中，我使用启动JavaScript添加数据，但没有理由不在服务器提供的标记中启用

然后，

getData

方法只读取属性并由JSON解析：

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

请注意，我刚刚将数据属性称为“数据素材”（data-*属性是有效的HTML5），显然将其命名更为恰当

没有jQuery的工作示例：

jQuery的工作示例：

请注意，如果您不想使用jQuery，并且确实想支持IE7及以下版本，则需要在页面中包含json2.js:

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

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（）赋值有点不同，但是访问数据是相同的。

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

进入innerHTML属性，如果您不想使用任何方法来寻址div，那么这将更加困难…您能详细说明一下吗？我不确定我是否正确地理解了这一点。是否要将数据放入div中？我知道你希望第一版的内容是'3'，第二版的内容是'xyz'，对不起，我只是误解了你想要的。我在答案中添加了适合您需要的内容。啊，我明白了，请给我一点时间。请停止标记您的标题。真遗憾，你这么做已经快两年了！一般来说，是否没有禁止将数据注入DOM的指导原则？我希望将数据和DOM分开，但似乎这是唯一的方法。以下是我尝试将它们分开的方法，但不起作用：（显然，这完全取决于您试图解决的问题，但如果您的数据如您所建议的那样特定于DOM元素，则将其附加到data foo属性是完全合法的，但也是有意义的。您提供的示例不喜欢将DOM元素用作键，因此失败。更多信息数据-*属性这里：我还应该补充一点——如果您想将DOM和数据分开，那么它可能会建议数据的键不是DOM元素，而是数据应该有一个指向DOM的引用（而不是相反）。这显然是一种更“传统”的做法将数据链接到DOM的方法。但是-如果您的逻辑是以DOM为中心的，那么它就不起作用-这都是关于您试图解决的特定问题：）抱歉-最后一条评论！使用data-*属性进行此操作的重要因素是，初始数据可以由服务器在标记中传递。如果这不重要，那么您最好使用下面的建议，将任意数据属性附加到DOM元素。谢谢！这是非常好的信息。我猜它的核心是“我正在尝试将DOM节点转换为可散列的内容。在Python中，我有两种选择，但在javascript中我没有看到。谢谢。我想到了这个解决方案，它确实很好地解决了这个问题，除了让DOM和应用程序数据结构相互缠绕不会让任何人感到不安之外？我试图将它们分开。我对JS来说太新了，无法拥有它们。”意识到在DOM中存储对象的实际局限性，我还没有找到任何对此有智慧的人。如果你的研究揭示了一个更好的惯例，请告诉我。我很难理解这一点。我不理解你使用逗号或

next

。我还看到一个未关闭的

。

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