本文提供一种健壮、高效的方法，用于在任意 DOM 容器中查找首个真正可聚焦（focusable 且 focusable in practice）的元素，同时正确处理禁用（disabled）、隐藏（display: none / visibility: hidden）、tabindex="-1"、inert 属性及祖先链限制等关键边缘场景。
本文提供一种健壮、高效的方法，用于在任意 dom 容器中查找首个真正可聚焦（focusable 且 focusable *in practice*）的元素，同时正确处理禁用（disabled）、隐藏（display: none / visibility: hidden）、tabindex="-1"、inert 属性及祖先链限制等关键边缘场景。
在构建可访问性友好或键盘导航增强的 Web 应用时，常需程序化地定位容器内“首个可聚焦元素”——例如模态框打开后自动聚焦、表单跳转逻辑、或无障碍焦点管理。但看似简单的任务实则充满陷阱：一个 <button></button> 可能因 disabled 被忽略；一个 <a href="#"></a> 若其某级父元素设置了 inert="" 或 display: none，则完全不可聚焦；而 tabindex="-1" 元素虽可被 JS 主动 .focus()，却不参与自然 Tab 顺序，通常不应视为“可聚焦候选”。
因此，真正的可聚焦性 ≠ 可被 CSS 选择器匹配，而 = 可通过键盘 Tab 进入 + 可被用户交互激活 + 不受祖先阻断。以下是一个生产就绪的解决方案：
function getFirstFocusableElement(container) {
if (!(container instanceof Element)) return null;
// 1. 获取所有潜在可聚焦元素（按 HTML 规范顺序）
const candidates = container.querySelectorAll(
'input:not([disabled]),' +
'select:not([disabled]),' +
'textarea:not([disabled]),' +
'button:not([disabled]),' +
'a[href]:not([disabled]),' +
'area[href]:not([disabled]),' +
'[tabindex]:not([tabindex="-1"]):not([tabindex=""]),'
// 注意：不包含 tabindex="0" 的显式过滤，因 0 是合法可聚焦值
);
// 2. 按 DOM 顺序逐个验证可聚焦性（关键步骤）
for (const el of candidates) {
// 排除被 inert 阻断的元素（含祖先 inert）
if (el.closest('[inert]')) continue;
// 排除视觉不可见元素（display: none / visibility: hidden / opacity: 0 不影响聚焦性，但通常应排除）
// 更严格：使用 offsetParent 判断是否渲染（主流框架如 React/Vue 也采用此法）
if (!el.offsetParent) continue;
// 排除被祖先隐藏（如父级 display: none）或禁用（fieldset[disabled]）
let parent = el.parentElement;
while (parent && parent !== container) {
if (parent.matches('fieldset[disabled]') ||
window.getComputedStyle(parent).display === 'none') {
break;
}
parent = parent.parentElement;
}
if (parent && parent !== container) continue;
// 最终验证：能否实际获得焦点（防御性检查）
if (el.matches(':focusable')) { // :focusable 是现代标准伪类（Chrome 103+、Firefox 117+、Safari 16.4+）
return el;
}
// 兜底兼容：手动模拟 focusability 判断（适用于旧浏览器）
const style = window.getComputedStyle(el);
if (style.display === 'none' ||
style.visibility === 'hidden' ||
style.opacity === '0') continue;
if (el.hasAttribute('disabled') ||
el.closest('fieldset[disabled]')) continue;
// tabindex >= 0 且非 -1，或为原生可聚焦元素
const tabIndex = el.getAttribute('tabindex');
if (tabIndex !== null && tabIndex !== '' && parseInt(tabIndex, 10) < 0) continue;
return el;
}
return null;
}✅ 使用示例：
const modal = document.querySelector('.modal');
const firstFocusable = getFirstFocusableElement(modal);
if (firstFocusable) firstFocusable.focus();⚠️ 重要注意事项：
-
:focusable伪类是 W3C 标准推荐方式，但若需支持旧版浏览器（如 IE 或早期 Chrome），请启用上述兜底逻辑； -
inert属性会阻止整个子树交互，closest('[inert]')是检测它的最可靠方式； -
offsetParent === null是判断元素是否渲染（即非display: none或未插入文档）的轻量级指标，比递归检查getComputedStyle性能更优； - 避免仅依赖
querySelector简单匹配（如答案中原始写法），它无法识别disabled状态、inert阻断或视觉隐藏，极易导致焦点陷入“死区”； - 若容器内无符合要求的元素，函数返回
null，调用方应有降级策略（如聚焦容器自身或document.body）。
该方案兼顾准确性与性能：通过 querySelectorAll 批量获取候选集（避免全量遍历），再以最小必要验证逻辑筛出首个真正可用元素，全面覆盖题目所列所有边缘情况。
