让我们分解一下。
首先，我们需要访问页面上的 DOM 元素，因此我们通过使用 document 本身的方法来实现，该方法将返回我们想要操作的元素。
var buttons = document.getElementsByTagName("button");
buttons 变量将是页面上所有按钮的列表。我们想对所有这些做一些事情，所以首先我们缓存列表的长度，即计算我们有多少个按钮。
var len = buttons.length;
然后我们基本上说：将 i 设置为 0，然后将其递增 1 直到等于我们拥有的按钮数。
for (i = 0; i < len; i++) {
现在，要访问列表中的一个按钮，我们需要使用括号表示法。所以buttons[0] 是第一个元素，buttons[1] 是第二个元素，依此类推。由于i 从0 开始，我们将i 放在括号中，以便在每次迭代时它都会访问列表中的下一个按钮。
buttons[i].onclick = function() {
var className = this.innerHTML.toLowerCase();
document.body.className = className;
};
}
这相当于做：
buttons[0].onclick = function() {
var className = this.innerHTML.toLowerCase();
document.body.className = className;
};
buttons[1].onclick = function() {
var className = this.innerHTML.toLowerCase();
document.body.className = className;
};
buttons[2].onclick = function() {
var className = this.innerHTML.toLowerCase();
document.body.className = className;
};
// etc.
当然那是超级低效的，而且我们可能不知道页面有多少个按钮。所以我们把所有的按钮都放在那里，找出有多少，然后遍历每个按钮并为它分配一个事件处理程序以及一个新类。
现在，查看 onclick 处理程序本身，我们可以看到它首先在被单击的按钮中找到 HTML，将其转换为小写字母，并将其分配给一个变量：
var className = this.innerHTML.toLowerCase();
通过使用this，我们确保每个按钮在被点击时都知道获得它自己的innerHTML。我们不会跟踪哪个按钮是哪个，我们只是告诉每个按钮检查它自己的内容。
然后它所做的就是将body HTML 元素的类更改为我们刚刚解析的任何内容
document.body.className = className;
所以说你有类似的东西
<button>success</button>
<button>failure</button>
<button>warning</button>
单击第一个按钮会将<body> 元素的类设置为success，单击第二个按钮会将其设置为failure，第三个按钮会将其设置为warning。