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

Question

目前，我正在尝试使用javascript根据页眉和页脚的高度设置中心元素(class ='main')的高度的自动更改。脚本是这样的:

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`);
}

如果我在querySelector主元素中选择，则可以看到一切正常，没有错误，并且元素的总和高度实际上是100vh:no error。
但是，如果我选择容器而不是第三条代码行const mainElement = document.querySelector('main')中的main元素(这是main元素的第一个子元素)，并且该行变成const mainElement = document.querySelector('container')，我会收到此错误:
error
除了容器之外，其他一些元素也会发生这种情况，但是我认为这足以说明一个例子。
另外，该警告通常会出现:“在页面完全加载之前就已强制布局。如果尚未加载样式表，则可能会导致未样式化内容闪烁。”。这可能与发生的错误有关，但是我找不到原因和解决方案。
我将不胜感激! :)
项目 list

Answer 1

您的容器是带有类容器的div，因此您应该查询“.container”(带点)，而不仅仅是“container”