使用 document.getElementsByClassName() 代替 id

Question

当我使用document.getElementById("stuff")尝试以下内容时，一切正常。

但是当我尝试通过使用document.getElementsByClassName("stuffClass")来做同样的事情时，它不起作用。

如何通过使用class而不是id来使其工作？

//var element = document.getElementById("stuff");
var element = document.getElementsByClassName("stuffClass");
var bb = element.getBBox();
var vb = bb.x+" "+bb.y+" "+bb.width+" "+bb.height;
element.setAttribute("viewBox", vb);

Answer 1

getElementByClassName返回一个NodeList，而不是单个元素。您需要为它编制索引：

var element = document.getElementsByClassName("stuffClass")[0];

或者，如果有多个元素具有相同的类，则需要循环访问它。

您也可以使用document.querySelector：

var element = document.querySelector(".stuffClass");

Answer 2

javascript getElementsByClassName() 方法返回文档中具有指定类名的所有元素的集合，作为NodeList object，表示nodes的集合。所述节点可以通过index numbers访问，类似于数组的工作方式。

这意味着必须选择要修改的每个元素。例如，如果我们想选择第二个元素：

document.getElementsByClassName("foo")[1];

为了修改具有指定类名的所有元素，需要一个循环函数。例如：

var elements = document.getElementsByClassName("foo");
for (i=0; i<elements.length; i++) {
    elements[i].style.color = "red";
}

您可以在此处阅读有关此问题的更多信息。