Question

是否有一种有效的方法可以将DOM元素保存在对象变量中，如下所示：

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

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

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

Answer 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()方法。

Answer 2

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

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

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

// etc...

上面的代码会在对象some-id的字段some-other-id和p中保存ID为h1和foo的元素。它还会在data1上设置字段data2和foo.p。同样可以在foo.h1上完成。

请注意，如果某些其他代码搜索标识为some-id的元素，则代码将在元素上看到data1和data2。也就是说，您的代码添加的字段对每个人都可见。

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

Answer 3

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

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

无论如何，谢谢你的回复。

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

3 个答案: