'Live Lists example DomTokenList values

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 class="eins zwei">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

Solution 1:^[1]

Looks good to me, please see the screenshot

Solution 2:^[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nitin
Solution 2	user17517503

'Live Lists example DomTokenList values

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]