javascript - 如何使用 for 循环在 Javascript 中使用 Query 选择器处理节点对象
问题描述
我有一个导航,我正在练习查询选择器。当我在控制台上运行查询选择器反对并在括号节点内添加一个数字时,它会在特定索引处显示实际元素,但是当我使用 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]);
}
解决方案
在这段代码中:
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>
推荐阅读
- haskell - 无需通过 Template Haskell 将函数转换为预先计算的查找表
- javascript - 比较angularjs中的角度副本和更改的数据并仅发送更改的项目
- python - Python3:如何比较两个嵌套和动态的字典的数据?
- azure - 如何通过 Azure ARM 模板部署引用不在 VM/App 网关资源组中的另一个 Vnet 的 VM/App 网关
- java - calendar.getDisplayName 返回错误的日期
- python - 估计图像的信噪比
- python - 使用正则表达式排序
- python - 悲情:泡菜失败
- javascript - 如何在角度 6 中将值从兄弟组件传递到路由器插座?
- java - 生成部分内容(206)作为使用 REST Web 服务分块下载 zip 文件的输出时出现问题