如何从与scripts.js文件不同的文件夹中的nodejs文件中读取HTML className？

Question

我有一个带有SRC文件夹HTML的前端文件夹，html，css script.js文件以及我的nodejs文件。在我的src文件夹中，我有一个称为组件的文件夹，在那里有一个用于我的navbar的组件标头：

const Header = {
   render: () => {
     const { firstname, isAdmin} = getCustomerInfo();
     return ` 
     <div class="container">
     <nav>
       <div class="Rlogo"><h4>At Home</h4></div>
       
       <ul class="nav-links">
         <li><a href="/#home">Home</a></li>
         <li><a href="/#about">About Us</a></li>
         <li><a href="/#menu">Menu</a></li>
         <li><a href="/#resturant">Resturant</a></li>
         ${ 
          firstname
          ? `<li><a href="/#/profile">${firstname}</a></li>`
          : `<li><a href="/#/signin">Sign-In</a></li>`
          }
         <li><a href="/#/cart">Cart</a></li>
        ${isAdmin?`<li><a href="/#/dashboard"> Dashboard</a></li>`: ''}
       </ul>
       <div class="burger">
         <div class="line1"></div>
         <div class="line2"></div>
         <div class="line3"></div>
       </div>
     </nav>
     </div>
     `;
   },
   after_render: () => {},
 };

export default Header;

我的脚本中有一个函数navslide.js.js文件：

const navSlide = () =>{
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
    // toggle Nav
    burger.addEventListener('click', () =>{
      nav.classList.toggle('nav-active');
      // Animate links
      navLinks.forEach((link, index) => {
        if(link.style.animation ){
          link.style.animation = ''
        }else{
          link.style.animation = `navLinkFade 0.5 ease forwards ${index/7 + 2.0}s`
      }
      });
      // burger animation
      burger.classList.toggle('toggle');
    })
 }
 navSlide();

我已经在末尾链接了这样的脚本在这样的闭合车身标签中，但是在我的控制台中，我会遇到错误：无法读取null的属性（读取'addeventListener'）：

 <script src="./scripts.js"></script>
    <script src="main.js"></script>
  </body>
</html>

我知道脚本无法找到.navlinks，burger class由于它们不在HTML文件中，而是在标题中的组件文件夹中。感谢您的任何指导和帮助