在对象中保存 DOM 元素的有效方法答案

【问题标题】：Efficient way to save DOM elements in an object在对象中保存 DOM 元素的有效方法
【发布时间】：2014-12-14 17:43:22
【问题描述】：

有没有一种有效的方法可以像这样将 DOM 元素保存在对象变量中：

http://img15.hostingpics.net/pics/357570example.png?

目的是将DOM对象的一些元素保存在一个变量中，以便能够添加属性。

我实际上可以通过 HTML5 中的数据属性，但我更喜欢纯 JavaScript（也是 JQuery）解决方案。

【问题讨论】：

标签： javascript jquery variables object dom

【解决方案1】：

您可以简单地将DOM 元素的集合存储在一个变量中。

例如，

var inputs = document.getElementsByTagName("input");

变量inputs 将包含输入元素的实时集合，您可以稍后参考以进行操作。

例如，您可以遍历此集合并使用简单的 for 循环添加一个 CSS 类，例如：

for(var i=0;i<inputs.length;i++){
  inputs[i].classList.add("newClass");
}

设置属性，可以使用setAttribute()方法。

你也可以在 jquery 中做同样的事情，只是访问元素的语法会改变。

例如，

var inputs = $("input");

您可以使用 each() 方法对 jQuery 对象输入进行迭代

inputs.each(function(){
  $(this).addClass("newClass");
});

要使用 jQuery 为元素设置属性，可以使用 attr() 方法。

【讨论】：

是的，我知道这种方式。但是如果我想将每个输入分别保存在一个对象中（在 object 中）（用于添加一些属性），我该怎么办？
您能否详细说明一下，将每个输入保存在一个对象中是什么意思？一个元素本身就是一个对象，。您可以使用setAttribute() 方法为其添加属性。
就像这里一样：img15.hostingpics.net/pics/357570example.png 想象 p 和 h1 就像一个输入。 “data1”和“data2”指的是它们的父对象。我想用 JS 在每个 DOM 元素上添加一些数据。这可能吗？保存元素并动态添加一些数据。

【解决方案2】：

在我看来你正在寻找这样的东西：

var foo = {
    p: document.getElementById('some-id'),
    h1: document.getElementById('some-other-id')
};

foo.p.data1 = "something";
foo.p.data2 = "something else";

// etc...

上面的代码将id为some-id和some-other-id的元素保存在对象foo的字段p和h1中。它还在foo.p 上设置字段data1 和data2。 foo.h1 也可以这样做。

请注意，如果其他代码查找 id 为 some-id 的元素，该代码将在该元素上看到 data1 和 data2。也就是说，您的代码添加的字段对所有人都是可见的。

现代浏览器接受在 DOM 元素上添加任意字段。较旧的浏览器不一定会接受它。我没有允许和不允许的浏览器列表。我建议使用比data1 更具表现力的东西。特别是这样的字段应该足够具体以避免名称冲突。当我这样做时，我会在我的字段名称前加上我的应用程序的名称。

【讨论】：

嗨。谢谢您的答复。这就是我想要做的，但动态地，即通过扫描 dom 来寻找元素并将它们放置在 javascript 对象中。有没有办法做到这一点？

【解决方案3】：

好的，我找到了如何做到这一点，通过传递这样的对象构造函数：

function objectConstructor( element ) {
    this.element = element;
    this.data1 = "string";
    this.data2 =  "string";
}

无论如何，感谢您的回复。

【讨论】：