时间戳

首页 > 解决方案 > 我应该如何在这里使用 querySelector？

javascript - 我应该如何在这里使用 querySelector？

问题描述

我正在尝试使用 vanilla JavaScript 为没有框架的客户端创建前端 SPA 路由。最终，我想单击列表元素中的链接，更新 iframe，并更新任务栏 URL。.querySelector()但是，在我可以可靠地使用之前，我不能做任何事情。下面是一个包含 HTML（原样）和 JS（……不是）的片段。

document.addEventListener(
  "DOMContentLoaded",
  () => {
    /**
     * DOM object declarations
     */

    // ID-labeled content
    const $nav = document.getElementById("nav");

    // Tabs
    let tabs = {};
    for (let tab in ["home", "about", "songs", "rates", "contact"]) {
      tabs[tab] = $nav.querySelector(tab);
    }

    /**
     * Routing logic
     *
     * Creates an event listener for each tab, which updates the iframe
     * content and the URL.
     */

    const routerCallback = (key) => {
      console.log(key);
    };

    for (let key in tabs) {
      const $tab = tabs[key];
      $tab.addEventListener("click", () => routerCallback(key));
    }
  },
  false
);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';">
    <title>Karaoke</title>
    
    <script src=/static/js/routing.js></script>
  </head>
  <body>
    
<nav id="nav">
  <ul>
    <a class="home" href="javascript:void(0);">
      <li>Home</li>
    </a>
    <a class="about" href="javascript:void(0);">
      <li>About</li>
    </a>
    <a class="songs" href="javascript:void(0);">
      <li>Songs</li>
    </a>
    <a class="rates" href="javascript:void(0);">
      <li>Rates</li>
    </a>
    <a class="contact" href="javascript:void(0);">
      <li>Contact</li>
    </a>
  </ul>
</nav>

<iframe
  id="content"
  width="800"
  height="600"
  src="/iframe/home"
></iframe>

  </body>
</html>

这会导致控制台错误。当我逐步使用调试器时，我注意到$nav变量首先被填充，但随后被设置为null. tabs取决于此，因此它null也会填充值。如何正确设置这些值？

标签： javascript

解决方案

  1. 使用for...of而不是for...in迭代数组的元素。
  2. 在类名之前使用.以选择具有指定类的元素。
let tabs = {};
for (let tab of ["home", "about", "songs", "rates", "contact"]) {
    tabs[tab] = $nav.querySelector('.' + tab);
}

推荐阅读