Why console shows different things when I use querySelector()?

when I use document.querySelector(), At first, I can see html tag in console like this.

// this is JS code
allProducts.forEach((product) => {
**const productList = document.querySelector('.product-list');**
console.log(productList);
});

// console.log
<d开发者_JS百科iv class="product-list">
      <!-- <div class="product">
        <img src="imgs/imgs/blue_s.png">
        <p>female, small size</p>
      </div> -->
    </div>

but after page refresh, console shows this.

//console.log
div.product-list (This is object.)
 accessKey:""
 align: ""
 ariaAtomic: null
 ariaAutoComplete: null
 ariaBrailleLabel: null
 ariaBrailleRoleDescription: null
 ...

I read MDN .querySelector() page(https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector). It says .quesySelector()'s return value type is 'Element'. But still, I don't know which one is 'Element' type and why I had to see html tags like first one before page refresh.

+) I am using Chrome browser.