我在使用创建的HTML按钮更改背景颜色时遇到了一些问题[重复]

Question

此问题已经在这里有了答案：

What do querySelectorAll and getElementsBy* methods return?（9个答案）

关闭3分钟前。

/*This is a function to change the background color to a light green to some specific area in the webpage. */

function changeColor()
{
    var aa = document.getElementsByClassName("a");
    var cc = document.getElementsByClassName("c");
    aa.className = "greenBack";
    cc.className = "greenBack";
}

.greenBack{
  background-color : rgb(174, 242, 78);
}

<input type = "button" value = "Change Background!" onclick = "changeColor()">

Answer 1

如果使用类和getElementsByClassName()方法，它将返回结果列表，因此，您需要采用第一个结果。

如果使用id和getElementById()方法，则它仅返回一个元素，然后直接采用它。

如果使用querySelector()方法，它将返回第一个元素，那么您可以直接使用它。

如果使用querySelectorAll()方法，它将返回匹配的元素列表，那么您可以获取列表的第一个元素。

function changeColor()
{
    var aa = document.getElementsByClassName("a")[0];
    var cc = document.getElementsByClassName("c")[0];
    aa.className = "greenBack";
    cc.className = "greenBack";
}