Ну да... запросили HTML-элемент, получили HTML-элемент))
В хроме, если записать console.dir( element )
можно еще в консоли посмотреть все свойства этого элемента. Правый клик на странице, в открывшемся меню - Inspect:
( можно проверить тут → https://jsfiddle.net/OPTlMUS/54nf86mz/ )
А значения всех этих свойств можно достать через "точку". .className
возвращает строку, а .classList
- массив. Хотя className == classList.value
var body = document.querySelector("body");
console.log( body.className );
console.log( body.classList[0] );
console.log( body.classList[1] );
console.log( body.classList.value );
<body class="fp-viewing-whatWeDo-0 test-class"></body>
P.s. .getAttribute('class')
vs .className
— разница в том, что первое достаёт то, что реально написано в атрибуте в HTML-коде в момент запроса... а второе - то, что содержится в JS-свойстве. В данном случае нет разницы, т.к. при смене класса, изменения происходят и тут, и там. А в других случаях идет рассинхрон - в атрибуте может быть одно, а в JS - другое ( например .onclick vs getAttribute('onclick') )
P.s.-2 body же не создаётся динамически... Поэтому вместо того, чтобы при скролле каждый раз пересоздавать переменную и искать body, можно так:
var bodyClass = document.querySelector("body").className;
window.onscroll = function() {
console.log( bodyClass );
}