时间戳

首页 > 解决方案 > 在 Vanilla javascript 中呈现所有 DOM 元素后如何加载 javascript？

javascript - 在 Vanilla javascript 中呈现所有 DOM 元素后如何加载 javascript？

问题描述

我现在只使用 vanilla javascript 构建 SPA。
首先，路由器检查 location.pathname 并呈现与路径匹配的 HTML 视图。
这是代码：document.querySelector("#app").innerHTML = await view.getHtml();

在该代码之后，我从与当前位置路径名匹配的另一个模块编写了调用 javascript 函数。它用于在 html 元素上添加事件侦听器。

问题是，它显示错误：Cannot read property 'classList' of null，我认为这是因为加载顺序。因为 javascript 没有等待所有 html 呈现，它尝试将 eventlistener 添加到 null。

所以我想在 html 元素全部加载后调用 javascript 函数，就像<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();
});

标签： javascript

解决方案

正如 Maxzeroedge 评论的那样，您有 2 个选项，您可以向loadDOM 中的事件添加一个侦听器，以便在加载所有元素后执行块，这样您就可以从应用程序中引用所有对象。

第二个选项更简单，是在正文的最后一行启动您的应用程序，例如：

<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>

这将在声明所有元素后运行，因此您没有任何参考问题。

推荐阅读