我怎樣才能創建一個圖像數組，每一個獨特的ID在JavaScript中使用getElementById？

Question

這是我有的代碼，但是當我嘗試使用圖像引用時，它的值是null。我希望能夠使用它來訪問表中的另一個圖像，並將src屬性更改爲preloadImages陣列中的一個。我已經創建了桌面，但我無法獲得對preloadImages陣列各個元素的參考。我希望每個圖像都有唯一的ID使用document.getElementById('id')請幫助！非常感激！

var preloadImages = new Array(); 
SIZE = 52; 

for(var h=0; h<SIZE; h++){ 
    preloadImages[h] = new Image(); 
    preloadImages[h].src = h+'.png'; 
    preloadImages[h].height =100; 
    preloadImages[h].width = 70; 
    preloadImages[h].id = "cardImage"+h+"";    
    var cardImageRef = document.getElementById("cardImage"+h+""); 
    document.write(cardImageRef+'h'); //This line is for testing, it just returns null 
} 

Answer 1

，除非在DOM樹中存在的元素，您不能使用getElementById()。此修改將它們添加到DOM：

for(var h=0; h<SIZE; h++){ 
    preloadImages[h] = new Image(70, 100);  // size here 
    preloadImages[h].src = h+ ".png"; 
    preloadImages[h].id = "cardImage" + h; 

    document.body.appendChild(preloadImages[h]); // add to DOM, or some parent element 

    var cardImageRef = document.getElementById("cardImage" + h); 
    document.write(cardImageRef + "h"); //This line is for testing, it just returns null 
} 

不過，既然你已經有一個數組引用的元素，你可以只是簡單的元素在那裏使用索引的ID（而不是使用一個ID的話） 。如果你的頁面佈局有幾個元素，這往往會更快。

var image = preloadImages[index]; 

如果你在哪裏使用圖像不被索引識別您可能做（但可能在這種情況下不相關）：

function getImage(id) { 
    for(var i = 0; i < preloadImages.length; i++) { 
    if (preloadImages[i].id === id) return preloadImages[i]; 
    } 
    return null; 
} 

所以，你可以在這裏使用它，例如：

for(var h=0; h<SIZE; h++){ 
    preloadImages[h] = new Image(70, 100);  // size here 
    preloadImages[h].src = h + ".png"; 
    preloadImages[h].id = "cardImage" + h;    
} 

document.write(getImage("cardImage0")); 

Answer 2

沒有理由在這裏使用ID。一般來說，這是一種動態構造ID的「代碼味道」，然後使用getElementById在文檔中找到它們。你可以改爲只使用元素本身。

在您發佈的代碼運行後，然後preloadImages數組包含添加的元素。您不需要使用getElementById來查找您剛剛構建的元素！正如你發現的那樣，直到元素被插入到DOM中，你根本就不能使用它，你還沒有做好準備！

因此，在你的表的邏輯，你可以簡單地插入您創建直接使用引用的圖像，你已經在preloadImages：

function makeTable(images) { 
    var table = document.createElement('table'); 
    var tr = document.createElement('tr'); 
    table.appendChild(tr); 

    for (var i = 0; i < images.length; i++) { 
     var td = document.createElement('td'); 
     tr.appendChild(td); 

     // put the images in the TD 
     td.appendChild(images[i]); 
    } 

    return table; // to be inserted somewhere 
} 

document.body.appendChild(makeTable(preloadImages)); 

我想你感到困惑，因爲有些人已經形成了一個習慣認爲ID是引用元素的唯一方式。他們通過連接字符串構造ID，然後在需要時使用getElementById檢索元素。實質上，他們使用文檔本身作爲一種全局的東西，從中檢索事物時使用ID作爲一種變量名稱。在這種情況下更好地處理JavaScript變量或數組中的元素本身。

Answer 3

函數document.getElementById()只能用於引用已添加到DOM的元素。

但是，如果你想通過自己的ID來參考圖像，你可以建立一個對象，而不是和使用id作爲重點：

var preloadImages = {}; 
SIZE = 52; 

for(var h = 0; h < SIZE; ++h) { 
    var i = new Image(); 
    i.id  = 'cardImage' + h; 
    i.src = h + '.png'; 
    i.width = 70; 
    i.height = 100; 

    preloadImages[i.id] = i; 
} 

之後，您可以參考每個圖像對象通過其ID如下：

var img = preloadImages['cardImage2']; 
// do something with image 
document.body.appendChild(img); // add to page