Javascript: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网址。

我尝试过使用 id 进行迭代

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

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

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

所以我想问的是:当我使用 trollface 类迭代所有元素时，为什么 getAttribute("id") 不起作用？如果我只使用上面第一个片段中显示的单行代码，它就可以正常工作。 迭代两次也可以吗，因为我用 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";
});