javascript - 如何向元素添加额外的类名？

Question

我不敢相信我在谷歌中找不到这个 - 我需要用类名 checkField 添加一个额外的类名到 div:

<div id="wth" class="checkField"><label>Ok whatever</label></div>

document.getElementById("wth").className="error"; // This works
document.getElementsByClassName("field").className="error"; // Doesn't work

我试过这个:

document.getElementsByClassName("field").getElementsByTagName("label").className="error";

^ 也不起作用。

有人可以给我一些建议吗？我对 JQuery 太习惯了。

Answer 1

getElementsByClassName 方法返回一个 nodeList，它是一个类似数组的对象，而不是单个元素。要做你想做的事，你需要迭代列表:

var divs = document.getElementsByClassName("checkField");
if (divs) {
  // Run in reverse because we're
  // modifying the result as we go:
  for (var i=divs.length; i-- >= 0;) {
    divs[i].className = 'error';
  }
}

此外，仅设置 className 实际上会替换类而不是添加类。如果你想添加另一个类，你需要这样做:

divs[i].className += ' error'; // notice the space bar

至于您要尝试做的第二件事，即设置标签的类而不是 div，您需要遍历 div 并在其上调用 getElementsByTagName:

var divs = document.getElementsByClassName("checkField");
if (divs) {
  // Run in reverse because we're
  // modifying the result as we go:
  for (var i=divs.length; i-- >= 0;) {
    var labels = divs[i].getElementsByTagName('label');
    if (labels) {
      for (var j=0; j<labels.length; j++) {
        labels[j].className = 'error';
      }
    }
  }
}