如何获取容器中的首个可聚焦元素？需处理各类边界场景

核心实现思路 #

利用浏览器原生CSS选择器与API，无需手动遍历所有子元素，即可精准匹配符合要求的第一个可聚焦元素，同时覆盖各类边界场景。

代码实现 #

function getFirstFocusableElement(parent) {
    // 先判断父容器本身是否不可交互
    if (parent.hasAttribute('inert') || parent.disabled || parent.getAttribute('aria-disabled') === 'true') {
        return null;
    }

    // 使用原生CSS伪类与选择器组合，匹配第一个有效可聚焦元素
    return parent.querySelector(':focusable:not([inert]):not([disabled]):not([aria-disabled="true"]):not([hidden])');
}

边界场景处理说明 #

• inert属性元素：:not([inert])排除带有inert的元素，这类元素及其子元素完全不可交互，自然无法聚焦。
• 禁用状态元素：:not([disabled])和:not([aria-disabled="true"])分别排除原生禁用的表单元素和通过ARIA标记为禁用的元素。
• 不可见元素：:not([hidden])排除带有hidden属性的元素（浏览器会将其设为display:none）；对于visibility:hidden的元素，:focusable伪类会自动忽略，因为这类元素无法接收焦点。
• tabindex=-1元素：默认包含这类元素（它们可通过JS或点击聚焦），若不需要包含，可在选择器中追加:not([tabindex="-1"])。
• 父级不可见/禁用：先判断父容器本身的状态，若父容器不可交互，直接返回null，无需再查找子元素。

优势说明 #

使用querySelector结合原生CSS伪类，依赖浏览器优化的选择器引擎，比手动遍历子元素的效率更高，代码也更简洁易维护。

内容的提问来源于stack exchange，提问作者Marino Šimić