HTML DOM NodeList.forEach() 方法

HTML DOM NodeList.forEach() 方法允许程序员对NodeList中的每个元素运行指定的函数。

语法

nodeList.forEach(function(currentValue, index, arr), thisValue)

参数说明：

• function(currentValue, index, arr): 必需。 定义一个运行每个元素的函数，其中
  • currentValue: 必需。表示元素值。
  • index: 可选。表示元素的索引值。
  • arr: 可选。表示 NodeList 对象。
• thisValue: 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。

示例

假设我们有以下HTML代码：

<ul id="myList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

我们可以使用JavaScript来遍历NodeList，并为每个列表项添加一个CSS class。

// 获取所有列表项
var listItems = document.querySelectorAll('#myList li');

// 遍历列表项，为每个列表项添加“selected” CSS class
listItems.forEach(function(li) {
  li.classList.add('selected');
});

这将会把每个列表项的CSS class更改为”selected”。

注意：NodeList是以简单的访问方式提供的，并且可以包含多个节点。 在上面的示例中，我们使用querySelectorAll()方法，但是可以直接从其他元素获取NodeList，例如：

var myImages = document.images;
myImages.forEach(function(img) {
  //...
});

兼容性

HTML DOM NodeList.forEach() 方法在以下浏览器中得到支持：

| IE | Edge | Firefox | Chrome | Safari | | ----- | ------ | ------- | ------ | ------ | | 不支持 | 12+ | 50+ | 51+ | 9+ |

总结

HTML DOM NodeList.forEach() 方法提供了一种方便的方法来遍历节点列表。它接受一个函数作为参数，该函数将应用于每个元素。如果您使用的是较新的浏览器，可以放心使用这个方法，否则可能需要使用传统的循环结构。