Question

我还在学习javascript，我发现这段代码是教程的一部分，并且不明白为什么我可以调试{。{1}}变量并查看集合。使用el变量，有一个空的项集合。帮助理解我在javascript的这一部分中缺少的内容。

谢谢

tabNavigationLinks

HTML

   (function() {

      'use strict';

      var tabs = function(options) {

        var el = document.querySelector(options.el);
        var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks);

         console.log(tabNavigationLinks);  // empty list of items

        var tabContentContainers = el.querySelectorAll(options.tabContentContainers);
        var activeIndex = 0;
        var initCalled = false;

      };

  window.tabs = tabs;

})();

对象传递给选项varialbe

<div id="tabs" class="c-tabs no-js">
      <div class="c-tabs-nav">
        <a href="#" class="c-tabs-nav__link is-active"></a>
        <a href="#" class="c-tabs-nav__link"></a>
      </div>
      <div class="c-tab is-active">
        <div class="c-tab__content"></div>
      </div>
      <div class="c-tab">
      <div class="c-tab__content"></div>
      </div>
   </div>

}）;

Answer 1

document.querySelector()将返回“节点”或null，具体取决于它是否可以找到与您提供的选择器匹配的元素。在您的示例中，您有：

 var el = document.querySelector(options.el);

应返回null，因为options.el周围没有引号，这意味着options.el将被评估为el对象的options属性。当像这样的查询返回null时，您不会立即收到错误。相反，当您使用应该存储结果的变量时，您将获得null，或者如果您尝试访问该对象的属性，则会得到null异常。

我想你打算写：

 var el = document.querySelector("options.el");

因为那是一个有效的选择器（所有options元素都有el类。但是，HTML中没有options（复数）元素。

document.querySelectorAll()将返回“节点列表” - - 始终。节点列表是否包含所有内容取决于找到的与提供的查询匹配的元素数量。当你写：

 el.querySelectorAll(options.tabNavigationLinks);

您将获得一个节点列表，其中包含具有options类的所有tabNavigationLinks元素，或者您将获得一个空节点列表。但同样，HTML中没有options（复数）元素。

为了能够告诉您更多信息，我们需要查看您的HTML。

使用console.log时没有看到节点列表

1 个答案: