Tab顺序在DOM中是如何工作的？

Source: Dev.to

DOM 中的 Tab 顺序遵循以下规则

默认行为

元素按照它们在 HTML 源码中出现的顺序获得焦点（从上到下、从左到右）。默认情况下，仅 可聚焦 的元素会参与：链接、按钮、表单输入、文本区域、下拉框，以及带有 contenteditable 属性的元素。

tabindex 属性

tabindex 属性以三种方式覆盖默认顺序：

tabindex="0"

使任何元素可聚焦，并将其放置在自然的 DOM 顺序中。适用于自定义交互元素，例如一个 “ 充当按钮的情况。

正数值（tabindex="1"、tabindex="2"，…）

将该元素提前到自然顺序之前——数值较小的正数先出现，随后是所有正数索引元素之后的 DOM 正常流动。通常不推荐使用，因为会给键盘用户带来突兀且不可预测的体验。

tabindex="-1"

使元素可以通过编程方式获得焦点（通过 JavaScript 的 .focus()），但完全从顺序 Tab 顺序中移除。适用于模态框或动态显示的面板等，需要在需要时获取焦点但不应通过 Tab 键访问的情况。

快速思维模型

1. 所有 正数 tabindex 值的元素，按升序排序。
2. 其余元素按 DOM 源码顺序（包括 tabindex="0" 的元素）。
3. tabindex="-1" 的元素在 Tab 时 全部跳过。

注意： 如果元素被隐藏（display: none 或 visibility: hidden）或被禁用，无论其 tabindex 值为何，都会自动从 Tab 顺序中移除。