Javascript 文档查询选择器在尝试删除或添加类时返回null，但在添加属性时效果良好

我已经在我的页面上实现了scrollSpy功能。我想知道的是，为什么我在执行查询选择并尝试删除或添加类“active”时会得到

null

，但在设置属性时它会找到元素？ 因此，这很好：

(function() {
  'use strict';
  const pageNav = document.querySelector('.page-nav');
  const fixClass = 'is-fixed';
  var section = document.querySelectorAll('.section-card');
  var sections = {};
  var i = 0;

  Array.prototype.forEach.call(section, function(e) {
    sections[e.id] = e.offsetTop;
  });

  window.onscroll = function() {
    if( window.pageYOffset > 56 ) {
       pageNav.classList.add(fixClass);
    }
    if( window.pageYOffset < 56 ) {
       pageNav.classList.remove(fixClass);
    }
    var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

    for (i in sections) {
      if (sections[i] <= scrollPosition) {
        console.log(document.querySelector('.active'));
        document.querySelector('.active').setAttribute('class', ' ');
        document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
      }
    }
  };
})();

这是html：

      <nav id="page-nav" class="nav section-links">
        <a class="nav-link active" href="#info">Info</a>
        <a class="nav-link active" href="#videos">Videos</a>
        <a class="nav-link active" href="#stats">Statistics</a>
      </nav>

---

设置属性时，在加载DOM后执行

querySelector（）

调用

但是对于设置类，您使用的是加载DOM之前发生的

querySelector（）

结果

---

因此，如果您想缓存这些元素，这样就不需要不断地重新选择它们，那么在这些元素存在之前，您的脚本不应该运行。尝试将脚本移动到

正文

元素的底部。

请单击

并从第二行代码中删除一个或两个代码片段。。document.querySelector（'a[href='+i+']'））.classList.add（'active'）；

      <nav id="page-nav" class="nav section-links">
        <a class="nav-link active" href="#info">Info</a>
        <a class="nav-link active" href="#videos">Videos</a>
        <a class="nav-link active" href="#stats">Statistics</a>
      </nav>