Value is not the in list of values of/in classlist, but in first line of console output (js)

Question

I wanted to toggle the highlighted class of a td element with ...classlist.toggle("highlighted"). Now I have the highlighted class in the first line, but not in the detailed description of the console output of the classlist (like in the picture). and i have no idea why.

(Just for information: I used the exact same line of code earlier and it worked without problems. Also this is my first bigger project and I don't have much experience.)

The console output of classlist which I don't understand:

Answer 1

Inspecting the results of logging an object to the console doesn't show what is in "expandable" property lists until the property is opened. Content is then shown as of the time it was expanded - meaning console.log(object) does not take a snapshot of the state of an object, it just maintains a reference to objects that are logged which have not been converted to a string.

The second console output shows it is logging a DOM token list of length two. This line is logged when console.log is called.

However, expansion of the second line shows content of a token list of length one.

Therefore, in between logging the first line and manually expanding it on the console, some piece of code was executed that toggled class highlighted off.

In conclusion, if you want to see classes assigned to an element at a particular point in time, log element.className (a string) instead of element.classList (an expandable array-like list object).