getAttribute()返回对象NodeList？

Question

因此，我要做的是根据HTML "id“属性的值显示一系列图像，这也是它们的图像文件的名称。我编写了一个Javascript代码，它将为本系列中的每个图像构建src url (忽略愚蠢的类名)：

var idnum = document.querySelectorAll(".trollface")[0].getAttribute("id");

var tribe;
if (idnum < 116903 && idnum > 100000) {
    tribe = "Xana";
} else if (idnum < 213403 && idnum > 200000) {
    tribe = "Hemi";
} else {
    tribe ="Theri";
} 

var icon = document.getElementsByClassName("trollface");
for(var i = 0; i < icon.length; i++) {
    icon[i].src = "Dot_files/" + tribe + "/Icons/" + idnum + ".png";
}

这很好，但是正如您可以看到的，所有的图像都将具有与本系列中的第一个图像相同的src，这不是我想要的。

我遇到的主要问题是获取每个img的id属性的值，并将它们用于自己的img src url。

我试过迭代id的

var idnum = document.querySelectorAll(".trollface");
for(var x = 0; x < idnum.length; x++) {
    idnum[x].getAttribute("id");
}

但在Chrome中，idnum的值是“object %20 NodeList”，我认为它是一个对象NodeList。这反过来导致一个ERR_FILE_NOT_FOUND (或类似的东西)，因为输出url变成了Dot_files/Theri/Icons/[object%20NodeList].png，它并不存在。

通过这个，我尝试将NodeList转换为数组，但在Chrome中仍然得到了相同的结果。

所以我想问的是:当我用类getAttribute("id")迭代所有元素时，为什么trollface不能工作呢？如果我只使用上面第一个片段中所示的一行代码，它就能正常工作。还可以重复两次，就像我用idnum迭代一次，用icon迭代第二次一样。这跟我的问题有关系吗？

有解决办法吗？我已经干了几天了，不知道该怎么做。

感谢您的帮助，为您的长期工作感到抱歉。如果需要的话，我可以提供更多的细节/解释。

Answer 1

不，没有。如果连接idnum变量而不是getAttribute方法的返回值，getAttribute将返回一个字符串而不是nodeList。您不存储getAttribute调用的返回值，您在哪里使用它们？idnum[x].getAttribute("id");本身实际上不会执行任何操作。这一行得到了值并将其丢弃。

而且，您似乎没有将if逻辑移到第二次迭代中。

var idnums = document.querySelectorAll(".trollface");

Array.prototype.forEach.call(idnums, function(el) {
    var tribe, id = el.id;
    if (id < 116903 && id > 100000) {
        tribe = "Xana";
    } else if (id < 213403 && id > 200000) {
        tribe = "Hemi";
    } else {
        tribe ="Theri";
    } 
    el.src = "Dot_files/" + tribe + "/Icons/" + id + ".png";
});