document.querySelector 返回 null，但元素存在

Question

At the moment, I'm trying to set up an automatic change in the height of the center element (class='main') depending on the height of the header and footer using javascript. The script is like this:

const headerHeight = document.querySelector('header').clientHeight;
const footerHeight = document.querySelector('footer').clientHeight;
const mainElement = document.querySelector('main');

changeMainBlockHeight();

function changeMainBlockHeight() {
    const resultMainHeight = pageHeight - headerHeight - footerHeight;
    mainElement.setAttribute('style', `height: ${resultMainHeight}px`);
}

If i choose in querySelector main element, you can see that everything is normal, no errors, and the summ height of the elements is really 100vh: no error . But if I choose container instead of the main element (this is the first child element of the main element) in the 3rd code line const mainElement = document.querySelector('main') , and line becomes const mainElement = document.querySelector('container') i get this error: error
This also happens with some other elements other than the container, but I think this is enough for an example.
Also, this warning often appears :"Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.". This may have something to do with the error that occurs, but I couldn't find a cause and solution.
I will be grateful for any help! :)

List item

Answer 1

你的容器是一个带有类容器的 div，所以你应该查询“.container”（带点）而不仅仅是“container”

Answer 2

When you use the query selector, you have to be precise for it to understand.

If you want to call an HTML tag like body , div or p you don't need to put anything else in your string for queryselector.

But here, since you want to call a class, you have to use the notation "." before your class name to specify to the query selector that you are looking for a class.

const mainElement = document.querySelector('.main');

The same applies for ids and the #.