如何用JS遍历UL中的所有LI元素？

Question

如何使用JavaScript高效遍历页面中指定UL元素下的所有LI子元素？常见的方法包括使用`getElementsByTagName`、`querySelectorAll`结合`forEach`，或通过`children`属性进行循环。但在实际应用中，开发者常遇到 NodeList 与 HTMLCollection 的差异、for...in 循环误用导致的性能问题，以及在动态添加LI后遍历结果未及时更新等典型问题。此外，箭头函数中使用`this`指向错误也容易引发异常。如何正确选择并兼容不同浏览器的方法，确保遍历操作稳定高效，是前端开发中的常见挑战。

Answer 1

一、基础遍历方法：从入门到理解核心接口

在JavaScript中，遍历指定UL元素下的所有LI子元素是前端开发中的常见任务。最基础的实现方式包括使用getElementsByTagName、querySelectorAll和children属性。

• getElementsByTagName：返回HTMLCollection，动态集合，自动响应DOM变化。
• querySelectorAll：返回静态NodeList，不随DOM更新而实时刷新。
• children 属性：仅包含元素节点（Element类型），忽略文本和注释节点。

const ul = document.getElementById('myList');
// 方法1：getElementsByTagName
const lisByTag = ul.getElementsByTagName('li');

// 方法2：querySelectorAll
const lisByQuery = ul.querySelectorAll('li');

// 方法3：children
const lisByChildren = ul.children;

二、数据结构差异：NodeList vs HTMLCollection

特性	NodeList	HTMLCollection
获取方式	querySelectorAll()	getElementsByTagName(), children
是否动态	否（静态）	是（动态）
是否可迭代	部分支持 forEach	不可直接 forEach
浏览器兼容性	IE9+	IE6+

开发者常误以为NodeList与Array完全一致，但实际上它不具备数组的所有方法（如map、filter）。HTMLCollection则是类数组对象，可通过索引访问但无迭代方法。

三、循环方式选择与性能陷阱

使用for...in遍历NodeList或HTMLCollection会导致意外行为，因为它会枚举所有可枚举属性，包括原型链上的方法，造成性能下降和逻辑错误。

// ❌ 错误示例：避免使用 for...in
for (let key in lisByQuery) {
  console.log(lisByQuery[key]); // 可能输出非预期成员
}

// ✅ 推荐方式：使用标准 for 循环
for (let i = 0; i < lisByChildren.length; i++) {
  console.log(lisByChildren[i]);
}

1. 优先使用传统for循环，性能最优且兼容性好。
2. 现代浏览器支持forEach于NodeList（IE11+）。
3. 可借助Array.from()将类数组转为真数组进行操作。

四、动态更新问题与应对策略

当通过JavaScript动态添加新的LI元素后，使用querySelectorAll获取的结果不会自动更新，因其返回的是静态快照；而getElementsByTagName和children返回动态集合，能反映最新状态。

// 动态添加 li 后：
const newLi = document.createElement('li');
newLi.textContent = 'New Item';
ul.appendChild(newLi);

// lisByQuery 不包含新项（静态）
console.log(lisByQuery.length); // 仍为旧值

// lisByTag 和 lisByChildren 包含新项（动态）
console.log(lisByTag.length); // 自动更新

因此，在频繁操作DOM的场景下，应优先考虑使用children以确保数据一致性。

五、this指向问题与箭头函数陷阱

在事件处理中使用箭头函数时，其this指向定义时的上下文，无法绑定到当前DOM元素，导致常见错误。

[...ul.children].forEach(function() {
  console.log(this.innerHTML); // 正确：this 指向每个 LI 元素
});

// ❌ 箭头函数中 this 不指向 LI
[...ul.children].forEach(() => {
  console.log(this.innerHTML); // undefined 或全局对象
});

graph TD A[选择遍历方法] --> B{是否需要动态更新?} B -- 是 --> C[使用 children 或 getElementsByTagName] B -- 否 --> D[使用 querySelectorAll] C --> E[采用 for 循环或 Array.from] D --> F[可安全缓存结果] E --> G[注意 this 指向] F --> G G --> H[完成高效遍历]

六、综合实践建议与兼容性优化

为兼顾性能、稳定性和浏览器兼容性，推荐以下模式：

function traverseLIs(ulElement, callback) {
  const children = ulElement.children;
  for (let i = 0; i < children.length; i++) {
    if (children[i].tagName === 'LI') {
      callback.call(children[i], i);
    }
  }
}

// 调用示例
traverseLIs(document.getElementById('myList'), function(index) {
  console.log(`${index}: ${this.textContent}`);
});

该方案避免了类数组转换开销，确保IE9+兼容，并正确处理this指向问题。