JavaScript遍历NodeList |21xrx.com

2023-07-05 05:37:49 深夜i -- --

JavaScript 遍历 NodeList

在使用JavaScript操作DOM（文档对象模型）时，经常需要遍历NodeList。NodeList是一种类似数组的对象，它保存了一组按顺序排列的节点，并且可以通过下标来访问其中的每一个节点。下面介绍几种常用的遍历NodeList的方法。

1. for循环

利用for循环遍历NodeList是最常用也是最简单的方式。示例代码如下：


var list = document.getElementsByTagName("li");
for(var i=0; i<list.length; i++){
  console.log(list[i].innerHTML);
}

在以上代码中，首先使用getElementsByTagName方法获取li元素集合，然后利用for循环遍历集合中的每一个元素，并在控制台输出它的innerHTML属性值。

2. forEach方法

使用ES6的forEach方法也可以遍历NodeList，但它需要把NodeList对象转换成数组才能使用。示例代码如下：


var list = Array.prototype.slice.call(document.getElementsByTagName("li"));
list.forEach(function(li){
  console.log(li.innerHTML);
});

在以上代码中，使用Array的slice方法将NodeList对象转换成了数组，并将其赋值给变量list。然后使用list对象的forEach方法遍历数组中的每一个元素，并输出它的innerHTML属性值。

3. jQuery的each方法

如果网站中使用了jQuery库，那么可以使用它的each方法遍历NodeList，示例代码如下：


$("li").each(function(){
  console.log($(this).html());
});

在以上代码中，使用jQuery的选择器获取li元素集合，然后使用each方法遍历集合中的每一个元素，并输出它的html属性值。

总结

以上就是几种常用的遍历NodeList的方式。虽然用法各不相同，但它们都能很好地帮助我们操作DOM元素，实现我们所需的功能。如果你了解其他遍历方式，欢迎在评论区留言分享。

上一篇: idea打包java可执行jar包

下一篇: 使用C++编写图形用户界面

()

相似文章