Позволяет сломать его.
Сначала нам нужно иметь доступ к элементу DOM на странице, поэтому мы делаем это, используя метод на самом document, который вернет элемент, который мы хотим манипулировать.
var buttons = document.getElementsByTagName("button");
buttons вар будет список всех кнопок на этой странице. Мы хотим что-то сделать со всеми из них, поэтому сначала мы кэшируем длину списка, т. Е. Подсчитываем, сколько кнопок у нас есть.
var len = buttons.length;
Тогда мы в основном говорят: множество я до 0, и шаг его один, пока его равно числу кнопок мы имеем.
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.
добавьте клик-прослушиватель для каждого '