我不太明白 JavaScript DOMTokenList的迭代是如何作業的。我想，這不是特定于 DOMTokenList 而是特定于（許多？）JavaScript-Objects。正如您在下面的代碼片段中看到的，我想div通過迭代相應的 DOMTokenList 來洗掉 a 的所有類。但只有testC()首先在額外陣列中收集類名的函式才會洗掉所有類。函式testA()并將testB()始終保留 css 類b。為什么？
備注：我當然知道可以以更好的方式洗掉物件的所有類。但是，我偶然發現了這對我意想不到的行為，并想了解我做錯了什么。
function testA() {
const element = document.getElementById('foo')
const elementClassList = element.classList
elementClassList.forEach(function(key) {
elementClassList.remove(key)
})
console.log(elementClassList)
}
function testB() {
const element = document.getElementById('bar')
const elementClassList = element.classList
const iterator = elementClassList.values()
for (let value of iterator) {
elementClassList.remove(value)
}
console.log(elementClassList)
}
function testC() {
const element = document.getElementById('bat')
const elementClassList = element.classList
let classNames = []
elementClassList.forEach(function(names) {
classNames.push(names)
})
classNames.forEach(function(name) {
elementClassList.remove(name)
})
console.log(elementClassList)
}div {
border: solid 1px gray;
background: #F8F9FA;
padding: 1rem;
margin-bottom: 1rem;
}<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DOMTOKenlost mystery</title>
<style>
</style>
</head>
<body>
<main>
<div id="foo" class="a b c">
#Foo<br> CSS-classes: a b c
</div>
<div id="bar" class="a b c">
#Bat<br> CSS-classes: a b c
</div>
<div id="bat" class="a b c">
#Ba<br> CSS-classes: a b c
</div>
<hr>
<button onclick="testA()" type="button">testA()</button>
<button onclick="testB()" type="button">testB()</button>
<button onclick="testC()" type="button">testC()</button>
</main>
<script>
</script>
</body>
</html>uj5u.com熱心網友回復：
發生這種情況是因為您在回圈期間更改了串列。通過更改串列，您可以移動索引。讓我們更詳細地回顧一下回圈：
第一次迭代：
- 當前指數：
0 - a 的索引：（
0匹配當前索引） - b的索引：
1 - c的索引：
2
第二次迭代：
- 當前指數：
1 - a的索引：已洗掉
- b的索引：
0 - c的索引：（
1匹配當前索引）
最后一次迭代：
- 當前指數：
2 - a的索引：已洗掉
- b的索引：
0 - c的索引：已洗掉
如您所見，唯一被洗掉的專案是當前索引與元素索引匹配的專案。
要解決此問題，您可以復制 classList 并對其進行回圈。
function testA() {
const element = document.getElementById('foo')
const elementClassList = [...element.classList]; // Make a copy.
elementClassList.forEach(function(key) {
element.classList.remove(key) // Remove from the original.
})
console.log(element.classList)
}<div id="foo" class="a b c">
#Foo<br> CSS-classes: a b c
</div>
<hr>
<button onclick="testA()" type="button">testA()</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491819.html
標籤：javascript html dom
下一篇：用前一個值減去值