js怎么遍历

function traverseUsingGetElementsByTagName() {

const listItems = document.getElementsByTagName('li');

for (let i = 0; i < listItems.length; i++) {

console.log(listItems[i].textContent);

}

}

在这个例子中，我们首先使用getElementsByTagName获取所有的<li>元素，然后通过一个for循环遍历每一个<li>元素，并输出其文本内容。

二、使用querySelectorAll方法

querySelectorAll方法更为强大和灵活，它可以使用CSS选择器来获取元素。返回的是一个NodeList，同样可以通过循环进行遍历。

function traverseUsingQuerySelectorAll() {

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

在这个例子中，我们使用querySelectorAll获取所有的<li>元素，然后使用forEach方法遍历每一个元素，并输出其文本内容。forEach方法是ES6引入的，使代码更简洁和可读。

三、使用childNodes方法

childNodes方法可以获取所有子节点，包括文本节点。因此在遍历时需要判断节点类型是否为元素节点。

function traverseUsingChildNodes() {

  const ul = document.getElementById('myList');
  const children = ul.childNodes;
  children.forEach(node => {
    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'LI') {
      console.log(node.textContent);
    }
  });
}

在这个例子中，我们首先获取包含<li>元素的父节点，然后遍历其所有子节点，判断节点是否为元素节点并且标签名为LI，最后输出文本内容。

四、使用ES6的for...of循环

ES6引入的for...of循环可以直接用于遍历NodeList和HTMLCollection，简化了代码。

function traverseUsingForOf() {

  const listItems = document.querySelectorAll('li');
  for (let item of listItems) {
    console.log(item.textContent);
  }
}

在这个例子中，我们使用querySelectorAll获取所有的<li>元素，然后使用for...of循环遍历每一个元素，并输出其文本内容。这种方法不仅简洁，而且兼具了性能和可读性。

五、使用Array.from方法

Array.from方法可以将类数组对象转换为真正的数组，从而可以使用数组的所有方法。

function traverseUsingArrayFrom() {

  const listItems = Array.from(document.querySelectorAll('li'));
  listItems.forEach(item => {
    console.log(item.textContent);
  });
}

在这个例子中，我们首先使用Array.from将NodeList转换为数组，然后使用forEach方法遍历每一个元素，并输出其文本内容。这种方法特别适合需要对集合进行更复杂的数组操作的场景。

六、总结

遍历<li>标签的方法多种多样，选择哪种方法取决于具体的需求和代码风格。getElementsByTagName适用于简单的遍历、querySelectorAll适用于复杂的选择器、for...of和Array.from适用于更现代和简洁的代码风格。

在实际项目开发中，选择合适的遍历方法可以提高代码的可读性和维护性。如果你正在进行团队协作，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高工作效率和项目管理水平。

相关问答FAQs：

1. 为什么要使用JavaScript遍历

var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
  var liContent = lis[i].textContent;
  console.log(liContent);
}

var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
  lis[i].style.backgroundColor = 'red';
}