如何使用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