如何按文档顺序查找下一个/上一个tabindex="0"的元素？

你的现有代码仅在.listbox的兄弟元素范围内查找，且循环逻辑会在遇到第一个不包含目标元素的父级时停止，无法覆盖整个文档里所有符合条件的元素。要实现按文档顺序全局查找，更可靠的方式是先获取所有tabindex="0"的元素，再根据当前元素的位置切换焦点。

实现代码示例 #

case 'Tab':
    // 阻止浏览器默认Tab跳转行为
    event.preventDefault();
    
    // 获取文档中所有tabindex="0"的元素，按文档顺序排列
    const allFocusable = Array.from(document.querySelectorAll('[tabindex="0"]'));
    // 定位当前聚焦元素在列表中的索引
    const currentIndex = allFocusable.indexOf(document.activeElement);
    
    if (event.shiftKey) {
        // Shift+Tab：切换到上一个元素，支持循环到末尾
        const prevIndex = currentIndex > 0 ? currentIndex - 1 : allFocusable.length - 1;
        allFocusable[prevIndex].focus();
    } else {
        // Tab：切换到下一个元素，支持循环到开头
        const nextIndex = currentIndex < allFocusable.length - 1 ? currentIndex + 1 : 0;
        allFocusable[nextIndex].focus();
    }
    break;

原代码问题分析 #

你的代码逻辑存在两个局限：

• 查找范围仅限定在.listbox的后续兄弟元素，无法覆盖文档其他区域的目标元素
• 循环条件while (!item.querySelector('[tabindex="0"]'))会在遇到第一个不包含目标元素的父级时终止循环，而非继续遍历后续元素

补充说明 #

• 使用Array.from()将NodeList转为数组，方便调用数组索引、长度等方法
• document.activeElement用于获取当前处于焦点状态的元素，确保能准确找到它在列表中的位置
• 代码包含循环切换逻辑（到最后一个元素时切回第一个，反之亦然），如果不需要循环，可移除边界判断，改为索引越界时不执行焦点切换

内容的提问来源于stack exchange，提问作者thebjorn