如何通过JavaScript实现HTML <li>元素集合的键盘方向键导航遍历、元素跟踪及回车时对象传递

嘿，这些都是前端开发里经常碰到的实用场景，我来给你一步步拆解解决：

这个需求常用于下拉菜单、列表选择器这类组件，核心思路是维护一个当前选中的索引，配合键盘事件更新索引并同步元素的选中状态：

首先准备基础的HTML结构和样式：

<ul id="itemList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<style>
li.active {
  background-color: #e0e0e0;
  outline: 2px solid #2196F3;
}
</style>

然后是JavaScript逻辑：

// 获取所有目标li元素
const listItems = document.querySelectorAll('#itemList li');
// 初始化当前选中索引（-1表示未选中任何项）
let currentIndex = -1;

// 给文档绑定键盘事件
document.addEventListener('keydown', (e) => {
  // 只响应上下方向键
  if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
  
  e.preventDefault(); // 阻止默认的页面滚动行为
  
  // 移除上一个选中项的样式
  if (currentIndex >= 0) {
    listItems[currentIndex].classList.remove('active');
  }

  // 根据按键更新索引，用取模实现循环遍历
  if (e.key === 'ArrowDown') {
    currentIndex = (currentIndex + 1) % listItems.length;
  } else {
    currentIndex = (currentIndex - 1 + listItems.length) % listItems.length;
  }

  // 给新选中项添加样式
  listItems[currentIndex].classList.add('active');
  // 可选：让选中项自动滚动到可视区域
  listItems[currentIndex].scrollIntoView({ block: 'nearest' });
});

关键细节：

• 用%运算符实现列表的循环遍历（比如从最后一项按向下键回到第一项）
• 调用scrollIntoView优化长列表的体验，避免选中项被隐藏
• 阻止默认行为防止页面滚动干扰导航

遍历HTML元素分两种常见场景，跟踪已遍历元素推荐用Set（因为它能高效判断引用类型的元素是否已被处理）：

场景1：遍历指定容器的直接子元素 #

const container = document.getElementById('targetContainer');
const traversedElements = new Set();

// 遍历容器的直接子元素
for (const child of container.children) {
  if (!traversedElements.has(child)) {
    console.log('遍历到元素:', child.tagName);
    traversedElements.add(child);
    // 这里可以添加自定义逻辑，比如修改元素样式
    child.style.padding = '8px';
  }
}

场景2：递归遍历整个DOM树（含嵌套元素） #

如果需要遍历所有嵌套元素，用递归方式配合Set避免重复处理：

const traversedElements = new Set();

function traverseElement(element) {
  // 已遍历过的元素直接跳过
  if (traversedElements.has(element)) return;
  
  console.log('遍历到元素:', element.tagName);
  traversedElements.add(element);

  // 递归遍历子元素
  for (const child of element.children) {
    traverseElement(child);
  }
}

// 从document.body开始遍历整个页面元素
traverseElement(document.body);

为什么用Set？因为DOM元素是引用类型，Set可以快速判断元素是否已存在，比数组的includes方法效率高很多，尤其是在元素数量多的时候。

核心是监听回车键事件，触发时直接将对象作为参数传入目标函数，还可以结合前面的列表导航场景使用：

基础示例 #

// 定义要传递的对象
const userInfo = {
  userId: 456,
  username: 'Jane Smith',
  permissions: ['edit', 'delete']
};

// 目标处理函数
function handleSubmit(data) {
  console.log('收到的对象数据:', data);
  // 这里可以添加业务逻辑，比如提交数据、弹窗提示等
  alert(`即将提交用户: ${data.username}`);
}

// 绑定键盘事件（可以绑定到特定元素，比如输入框）
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止默认回车行为（比如表单自动提交）
    handleSubmit(userInfo); // 传递对象调用函数
  }
});

结合列表导航的进阶示例 #

如果是选中

// 结合第一个问题的代码，回车时传递当前选中项的信息
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
    // 之前的方向键导航逻辑...
  } else if (e.key === 'Enter' && currentIndex >= 0) {
    e.preventDefault();
    // 从选中的li提取数据构造对象
    const selectedItemData = {
      text: listItems[currentIndex].textContent.trim(),
      position: currentIndex + 1,
      element: listItems[currentIndex]
    };
    handleSubmit(selectedItemData);
  }
});