如何使用javascript中的getElementById創建一個圖像數組，每個圖像數組都有一個唯一的id？

Question

這是我的代碼，但是當我嘗試使用圖像引用時，它的值為null 。 我希望能夠使用它來訪問表中的另一個圖像，並將src屬性更改為preloadImages數組中的一個。 我已經創建了表，但我無法獲得preloadImages數組的各個元素的preloadImages 。 我希望每個圖像都有一個使用document.getElementById('id')的唯一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