Javascript: getAttribute() returns 对象节点列表？

Question

所以我要做的是根据 HTML "id" 属性的值显示一系列图像，这也是图像文件的名称。我已经编写了一个 Javascript 代码，它将为系列中的每个图像构建 src url（忽略愚蠢的 class 名称）：

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%20NodeList]”，我认为它是一个对象NodeList。这反过来会导致 ERR_FILE_NOT_FOUND（或类似的东西），因为输出 url 变成 Dot_files/Theri/Icons/[object%20NodeList].png，它不存在。

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

所以我想问的是：当我用class trollface遍历所有元素时，为什么getAttribute("id")不起作用？如果我只使用上面第一个片段中显示的单行代码，它就可以正常工作。迭代两次也很好，因为我用 idnum 迭代了一次，第二次用 icon 迭代了。这跟我的问题有关系吗？

有解决办法吗？我已经在这几天了，不知道如何进行。

感谢您的帮助，抱歉拖了这么久post。如果需要，我可以提供更多 details/explanation。

Answer 1

不，不是。如果您连接 idnum 变量而不是 getAttribute 方法的返回值，您将得到该结果， getAttribute returns 一个 string 不是一个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";
});

Javascript: getAttribute() returns 对象节点列表？

Javascript: getAttribute() returns object NodeList?

javascript

html

nodelist