在 UL 中循环遍历 LI 元素 - JavaScript

简介

在前端开发中，经常需要对 HTML 中的列表进行遍历操作。UL 是无序列表的标签，而 LI 是其内部子项的标签。本文将介绍如何使用 JavaScript 遍历 UL 中的 LI 元素。

代码实现

在 JavaScript 中，我们可以通过以下代码实现 UL 中的 LI 元素的遍历：

const ul = document.querySelector('ul');
const lis = ul.querySelectorAll('li');
lis.forEach(li => {
  // 对每个 LI 元素的操作
});

如上所示，querySelector 方法可以获取到第一个符合条件的元素，而 querySelectorAll 方法可以获取所有符合条件的元素。在本例中，我们通过 querySelector 获取到了 ul 元素，进而通过 querySelectorAll 获取到了其中的 li 元素。最后，我们通过 forEach 循环遍历每个 li 元素，并且在循环体内进行操作。

具体如何操作每个 LI 元素，取决于你的需求，可以是样式调整，也可以是数据修改等等。

完整代码

完整代码如下所示：

const ul = document.querySelector('ul');
const lis = ul.querySelectorAll('li');
lis.forEach(li => {
  // 对每个 LI 元素的操作
});

总结

本文介绍了如何使用 JavaScript 遍历 UL 中的 LI 元素，并且提供了相应的示例代码。对于前端开发，这个技能非常实用，相信读者在学习本文后将对此有所收获。