谷歌浏览器不允许我使用 setAttribute 作为 ID

Question

我这里有一些 JS 代码。基本上，我正在尝试将元素的 ID 更改为先前变量中的某个值。

这是我目前得到的；

function() {
  var colorarray = [ "RANDOMCOLOR_0", "RANDOMCOLOR_1", "RANDOMCOLOR_2" ];
  var RANcolorarray = colorarray[Math.rsound(Math.random() * (colorarray.length - 1))];
  document.getElementsByClassName('RANDOMCOLOR').setAttribute('id', RANcolorarray); 
}

此代码在 Chrome 中为第 4 行引发错误：Uncaught TypeError: undefined is not a function，这很奇怪，因为 JsLint 没有发现任何错误。

我也尝试使用其他方式来设置 id；

document.getElementsByClassName('RANDOMCOLOR').id = RANcolorarray;

然而，虽然这个方法不会在 chrome 或 jslint 上抛出错误 - 在检查元素后它根本不起作用..：/

有什么想法吗？

Answer 1

document.getElementsByClassName('RANDOMCOLOR') 返回一个 DOM 节点列表（即使只有一个匹配项），因此您不能只在列表上调用 .setAttribute()，因为该列表没有该方法。

您可以从列表中取出第一个项目并在该项目上调用.setAttribute()，或者使用for 循环遍历列表并在所有项目上调用它。当然，既然你要设置 id，你不应该将多个元素设置为同一个 id，所以我假设你只想要一个元素：

document.getElementsByClassName('RANDOMCOLOR')[0].id = RANcolorarray; 

或者，更安全一点：

var elems = document.getElementsByClassName('RANDOMCOLOR');
if (elems && elems.length) {
    elems[0].id = RANcolorarray; 
}