我现在只使用香草javascript构建SPA。
首先，路由器检查位置。并呈现与路径匹配的HTML视图。
这是代码:document.querySelector("#app").innerHTML = await view.getHtml();
之后的代码，我写调用javascript函数从另一个模块匹配当前位置的路径名。在html元素上添加事件监听器
问题是，它显示错误:Cannot read property 'classList' of null，我认为这是由于加载顺序。因为javascript没有等待所有html渲染，所以它尝试将eventlistener添加为null。
所以我想让javascript函数调用html元素后所有加载像<script defer>在html。(我不能使用它，我应该只做javascript代码)
有人知道怎么做吗?我当前的代码在这里…
const router = async () => {
// check current pathname and match the view
...
document.querySelector("#app").innerHTML = await view.getHtml();
const path = location.pathname;
if (path === "/") main();
if (path === "/list") list();
}
document.addEventListener("DOMContentLoaded", () => {
router();
});
你有2个选项，正如Maxzeroedge评论的那样，你可以在DOM中添加一个监听器到load事件，以便在加载所有元素后执行块，这样你就可以从应用程序中引用所有对象。
第二个选项更简单，在正文的最后一行启动应用，比如:
<html>
<head>
...
</head>
<body>
// All your elements here.
<script type="text/javascript" src="./-your-script-.js"></script> // The last line is your script call.
</body>
</html>
这将在所有元素声明后运行，这样你就不会有任何引用问题。