如何在JS中将HTML集合复制到数组中

Question

我想把网页中所有按钮的颜色保存在一个数组中，并更改按钮的颜色。之后，我希望能够访问这些颜色并再次将其还原。这是我的HTML代码

var all_buttons = document.getElementsByTagName('button');
var copyAllButtons = [];
for (let i = 0; i < all_buttons.length; i++) {
copyAllButtons.push(all_buttons[i]);
}
function buttonColorChange(buttonThis) {
if (buttonThis.value === 'red') {
buttonsRed();
} else if (buttonThis.value === 'reset') {
buttonColorReset();
}
}
function buttonsRed() {
for (let i = 0; i < all_buttons.length; i++) {
all_buttons[i].classList.remove(all_buttons[i].classList[1]);
all_buttons[i].classList.add('btn-danger');
}
}
function buttonColorReset() {
for (let i = 0; i < all_buttons.length; i++) {
console.log(typeof(all_buttons));
all_buttons[i].classList.remove(all_buttons[i].classList[1]);
console.log(copyAllButtons[0].classList);
all_buttons[i].classList.add(copyAllButtons[i]);
}
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="flex-box-pick-color">
<form action="">
<select name="backdrop" id="background" onchange="buttonColorChange(this)">
<option value="random">Random</option>
<option value="red">Red</option>
<option value="reset">Reset</option>
</select>
</form>
<button class="btn btn-primary">Whatever</button>
<button class="btn btn-danger">Nothing</button>
<button class="btn btn-warning">:)</button>
<button class="btn btn-success">(:</button>
</div>

我有这个下拉菜单，如果你选择红色，页面上的所有按钮都变成红色。但是如果你选择重置，它必须把颜色改回来。目前，当all_buttons变量改变时，copyAllButtons变量也在改变，所以它给了我错误:

未捕获的DOMException: Failed to execute 'add' on 'DOMTokenListtoken提供('[object HTMLButtonElement]')包含HTML空间字符，在令牌中无效。

我能做什么?

Answer 1

访问的是DOM节点，而不是实际的类。你的buttonColorReset函数应该像这样:

function buttonColorReset() {
for (let i = 0; i < all_buttons.length; i++) {
console.log(typeof(all_buttons));
all_buttons[i].classList.remove(all_buttons[i].classList[1]);
console.log(copyAllButtons[0].classList);
all_buttons[i].classList.add(copyAllButtons[i].className)
}
}