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

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