1. 使用for循环遍历Nodelist

可以使用常规的for循环来遍历Nodelist。要遍历Nodelist的所有项，需要使用nodelist.length属性，并使用nodelist.item(index)方法来访问单个元素。

const nodeList = document.querySelectorAll('li');
for (let i = 0; i < nodeList.length; i++) {
  console.log(nodeList.item(i).textContent);
}

2. 使用forEach方法遍历Nodelist

如果想用更简洁的方式遍历Nodelist，可以使用forEach方法。这种方法的语法更加简洁，但不支持在每个项上使用break或continue。

const nodeList = document.querySelectorAll('li');
nodeList.forEach((element) => {
  console.log(element.textContent);
});

3. 使用for...of循环遍历Nodelist

使用for...of循环可直接遍历Nodelist的每个元素，它的语法更简单，且不需要使用nodelist.item(index)方法来访问单个元素。

const nodeList = document.querySelectorAll('li');
for (const element of nodeList) {
  console.log(element.textContent);
}

4. 将Nodelist转换为数组，使用数组方法

还可以将Nodelist转换为数组，然后使用支持在每个项上使用break或continue的数组方法，例如for循环、forEach方法、map方法、reduce方法等等。

const nodeList = document.querySelectorAll('li');
const listArray = Array.from(nodeList);
listArray.forEach((element) => {
  console.log(element.textContent);
});

以上是四种常用的方法，使用哪一种可能根据实际需求而定。至于示例，可以使用以下网页代码：

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
      <li>第四项</li>
      <li>第五项</li>
    </ul>
  </body>
</html>

同时在JavaScript代码块中使用以上的四种方法都会输出ul中li的文本内容，例如：

const nodeList = document.querySelectorAll('li');
for (let i = 0; i < nodeList.length; i++) {
  console.log(nodeList.item(i).textContent);
}

const nodeList = document.querySelectorAll('li');
nodeList.forEach((element) => {
  console.log(element.textContent);
});

const nodeList = document.querySelectorAll('li');
for (const element of nodeList) {
  console.log(element.textContent);
}

const nodeList = document.querySelectorAll('li');
const listArray = Array.from(nodeList);
listArray.forEach((element) => {
  console.log(element.textContent);
});

以上代码块可以再控制台中测试运行。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现循环Nodelist Dom列表的4种方式示例 - Python技术站