如何使用for循环在Javascript中使用Queryselector处理节点对象

Question

我有一个导航器，我正在练习查询选择器。当我在控制台上运行查询选择器异议并在括号节点内添加一个数字时，它会显示特定索引处的实际元素，但是当我使用for循环获取所有元素时，它表示该对象未定义。我不知道为什么所以任何帮助都会受到赞赏。谢谢

  <nav class="navbar">
    <a href="#" class="navbar-brand">WebD<ev</a>
  <ul>
   <li><a href="#html">HTML</a></li>
   <li><a href="#css">CSS</a></li>
  <li><a href="#javascript">JavaScript</a></li>
</ul>
<button class="navbar-toggler">
  <span></span>
</button>

 var navbarToggler = document.querySelector(".navbar-toggler");
 var navbarMenu = document.querySelector(".navbar ul");
 var navbarLinks = document.querySelectorAll(".navbar a");

   for(var i = 0 ; i< navbarLinks; i++)
{console.log(navbarLinks[i]);
  }

Answer 1

在这段代码中：

var navbarLinks = document.querySelectorAll(".navbar a");

navbarLinks变量包含NodeList。

因此，您可以使用.length属性。

通过这种方式：

for (var i = 0; i < navbarLinks.length; i++) {
  console.log(navbarLinks[i]);
}

像这样的东西：

(function() {
  var navbarToggler = document.querySelector(".navbar-toggler");
  var navbarMenu = document.querySelector(".navbar ul");
  var navbarLinks = document.querySelectorAll(".navbar a");

  for (var i = 0; i < navbarLinks.length; i++) {
    console.log(navbarLinks[i]);
  }

}());

<nav class="navbar">
  <a href="#" class="navbar-brand">WebDev</a>
  <ul>
    <li><a href="#html">HTML</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#javascript">JavaScript</a></li>
  </ul>
  <button class="navbar-toggler">
  <span></span>
</button>