能否通过tabindex选择DOM元素创建数组？求正确实现方法

当然可以！完全可以通过tabindex属性筛选页面元素并生成对应的有序数组，下面我会给出规范的实现方案，同时兼顾实际浏览器Tab导航的规则细节。

核心思路 #

要实现这个需求，我们需要完成三个关键步骤：

1. 筛选所有带tabindex属性的元素
2. 过滤出有效/需要的元素（比如排除不可通过Tab键聚焦的负数值元素）
3. 按需求排序（要么按tabindex数值大小，要么模拟浏览器Tab的实际导航顺序）

详细实现代码 #

1. 基础版：获取所有带tabindex的元素并按数值排序

这个版本会收集所有带有tabindex属性的元素，过滤掉无效值（比如非数字），然后按tabindex的数值从小到大排序：

function getSortedTabindexElements() {
  // 1. 获取所有带有tabindex属性的元素，转换为数组
  const allTabindexElements = Array.from(document.querySelectorAll('[tabindex]'));

  return allTabindexElements
    // 2. 过滤：只保留tabindex为有效数字且>=0的元素（负数不可通过Tab聚焦）
    .filter(element => {
      const tabindex = parseInt(element.getAttribute('tabindex'), 10);
      // 确保值是数字且非负
      return !isNaN(tabindex) && tabindex >= 0;
    })
    // 3. 按tabindex数值从小到大排序
    .sort((a, b) => {
      const tabIndexA = parseInt(a.getAttribute('tabindex'), 10);
      const tabIndexB = parseInt(b.getAttribute('tabindex'), 10);
      return tabIndexA - tabIndexB;
    });
}

// 调用函数得到结果
const sortedElements = getSortedTabindexElements();
console.log(sortedElements);

针对你提供的示例HTML，这个函数返回的数组顺序会是：
focusguard-1（tabindex=0） → input（tabindex=1） → first-item（tabindex=2） → ... → last-item（tabindex=11）

2. 进阶版：模拟浏览器Tab导航的真实顺序

浏览器的Tab键导航逻辑其实是有优先级的：

• 先遍历tabindex为正整数的元素，按数值从小到大排序；
• 再遍历tabindex=0的元素，按它们在DOM中的出现顺序排列；
• 负数tabindex的元素不会被Tab键聚焦，仅可通过JS手动聚焦。

如果要完全贴合这个规则，我们可以调整代码：

function getTabOrderElements() {
  const allTabindexElements = Array.from(document.querySelectorAll('[tabindex]'));

  // 分离tabindex>0的元素，按数值排序
  const positiveTabindexElements = allTabindexElements
    .filter(element => {
      const tabindex = parseInt(element.getAttribute('tabindex'), 10);
      return !isNaN(tabindex) && tabindex > 0;
    })
    .sort((a, b) => {
      const tabIndexA = parseInt(a.getAttribute('tabindex'), 10);
      const tabIndexB = parseInt(b.getAttribute('tabindex'), 10);
      return tabIndexA - tabIndexB;
    });

  // 分离tabindex=0的元素，保留DOM顺序
  const zeroTabindexElements = allTabindexElements
    .filter(element => {
      const tabindex = parseInt(element.getAttribute('tabindex'), 10);
      return !isNaN(tabindex) && tabindex === 0;
    });

  // 合并：先正数值排序的元素，再0值的DOM顺序元素
  return [...positiveTabindexElements, ...zeroTabindexElements];
}

// 调用函数
const tabOrderedElements = getTabOrderElements();
console.log(tabOrderedElements);

针对你的示例，这个函数返回的顺序会和实际Tab导航一致：
input（tabindex=1） → first-item（tabindex=2） → ... → last-item（tabindex=11） → focusguard-1（tabindex=0）

关键细节说明 #

• 为什么用document.querySelectorAll('[tabindex]')：这个CSS属性选择器能精准匹配所有带有tabindex属性的元素，不管属性值是什么，是最规范的筛选方式。
• 转换为数组：querySelectorAll返回的是NodeList，不是数组，所以用Array.from()或者扩展运算符[...nodes]转成数组，才能使用filter、sort等数组方法。
• parseInt加基数10：确保tabindex的字符串值被正确解析为十进制数字，避免遇到类似tabindex="08"时被错误解析为八进制的问题。
• 过滤无效值：有些元素可能会设置非数字的tabindex（比如tabindex="abc"），这时候parseInt会返回NaN，我们需要把这些无效元素排除。

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