有效的方式來保存的DOM元素中的對象

有沒有一種有效的方式來保存的DOM元素在這樣一個對象變量：有效的方式來保存的DOM元素中的對象

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

其目的是保留變量中DOM對象的某些元素以便能夠添加屬性。

我實際上可以通過HTML5中的數據屬性，但我更喜歡純粹的JavaScript（JQuery）解決方案。

2014-10-19 TyrionGraphiste

您可以簡單地將一組DOM元素存儲在一個變量中。

例如，

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

變量inputs將包含輸入元素的集合現場你可以參考後面的操作。

例如，你可以遍歷這個集合，並添加使用簡單的CSS類的循環，如：

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

對於設置屬性，可以使用setAttribute()方法。

你可以在jquery中做同樣的事情，只有訪問元素的語法會改變。

例如，

var inputs = $("input");

您可以使用它each()方法就像

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

對於使用jQuery的屬性設置爲一個元素，你可以使用它的attr()法在jQuery對象輸入迭代。

來源

2014-10-19 18:24:04

是的我知道這種方式。但是，如果我想將每個輸入單獨保存在一個對象中（用於添加一些屬性），我該怎麼做？ – TyrionGraphiste 2014-10-19 18:26:18

你能詳細說明，你的意思是*將每個輸入保存在一個對象*中？一個元素本身就是一個對象。你可以使用'setAttribute（）'方法爲它添加屬性。 – 2014-10-19 18:29:02

Juste喜歡這裏：http://img15.hostingpics.net/pics/357570example.png 想象p和h1就像一個輸入。「data1」和「data2」引用它們的父對象。我想用JS添加一些關於每個DOM元素的數據。這可能嗎？保存元素並動態添加一些數據。 – TyrionGraphiste 2014-10-19 18:37:20

在我看來，您正在尋找這樣的事情：

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在田裏p和對象foo的h1的元素。它還在foo.p上設置了字段data1和data2。同樣可以在foo.h1上完成。

注意，如果一些其他的代碼尋求具有ID some-id元素的代碼會看到data1和data2的元素。也就是說，您的代碼添加的字段對每個人都是可見的。

現代瀏覽器接受在DOM元素上添加任意字段。舊的瀏覽器不一定會接受它。我沒有一個允許它的瀏覽器列表和那些不會的瀏覽器列表。我會建議使用比data1更有表現力的東西。特別是這樣的領域應該足夠具體以避免名稱衝突。當我這樣做時，我在我的字段名稱前加上我的應用程序的名稱。

來源

2014-10-19 23:29:55 Louis

嗨。感謝您的答覆。這就是我想要做的，但動態的，即通過掃描dom尋找元素並將它們放在javascript對象中。有沒有辦法做到這一點？ – TyrionGraphiste 2014-10-20 10:51:24

好吧，我發現我怎麼能做出這樣，通過一個對象構造函數傳遞這樣的：

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

以任何方式，感謝您的答覆。

來源

2014-10-20 21:46:58 TyrionGraphiste

有效的方式來保存的DOM元素中的對象

回答

相關問題