Live Lists example DomTokenList values-CodePudding

I have a question regarding the console output of the DomTokenList(in general live lists). Why does the first console output also show the 3 values instead of 2. Although I added the third class afterwards. I already set a timeout but the result is the same.

Thanks & Have a nice Sunday

<!DOCTYPE html>
<html lang="en">

<head>

    <style>
.eins {background-color:orange;height:50px;}
.zwei {color:red;}
.drei {width:50px;}

    </style>

</head>

<body>
    <div >JS</div>

    <script>
var eins=document.querySelector("div");
var klasse=eins.classList;
console.log(klasse);
setTimeout(b,1000);
function b(){
eins.classList.add("drei");
console.log(klasse);}

    </script>

</body>

</html>

Screenshot console output

CodePudding user response：

Looks good to me, please see the screenshot

CodePudding user response：

It will be updated later. If you set the delay to say 10 seconds and open the list immediately, it contains only 2 items. But it's even easier if you use console.log (klasse.length). It gave me 2 ... 3.