教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载导读在处理键盘导航、表单校验、无障碍体验或自定义交互组件时开发者经常需要知道此刻哪个 DOM 元素处于聚焦状态。本文基于 30-seconds-of-code 仓库中的 select-focused-dom-element 代码片段系统讲解如何使用Document.activeElement一行代码获取当前聚焦元素对比 CSS:focus选择器与Document.querySelector()方案的差异并厘清焦点focus与选区selection这两个容易混淆的概念。读完本文你将掌握一个可在任何浏览器环境中直接复用的焦点探测技巧并能将其正确接入表单校验、快捷键分发、无障碍管理等实战场景。一、三行代码看懂的Document.activeElement获取当前聚焦元素在原生 JavaScript 中只需要一行代码const focusedElement document.activeElement; // focusedElement 是当前聚焦的元素Document.activeElement是一个只读属性它始终指向文档中当前获得焦点的元素。当页面没有任何元素获得焦点时该属性通常返回document.body在页面加载完成之前它可能是null。因此在实际使用中建议先做一次判空或类型检查避免对null调用属性方法const focusedElement document.activeElement ?? document.body; if (focusedElement focusedElement.matches(input, textarea, select)) { // 当前焦点位于可编辑表单控件上 }这一技巧在 30-seconds-of-code 仓库中被收录于 JavaScript DOM QueryingDOM 查询集合与获取图片列表、元素在视口中的可见性判断、获取指定坐标处的元素Document.elementFromPoint()等同属浏览器端 DOM 查询的常用能力清单适合作为日常开发工具箱中的基础 API 使用。二、三种找焦点方案对比CSS、querySelector 与 activeElement2.1 CSS:focus选择器现代 CSS 中:focus 伪类可以直接描述当前聚焦的元素input:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }它主要服务于样式层面比如为聚焦的输入框绘制高亮边框。但样式能表达聚焦状态长什么样却无法把哪个元素被聚焦这个结果交给 JavaScript 逻辑使用。2.2 JavaScript 中的document.querySelector(:focus)如果想在 JavaScript 里用选择器语法拿到聚焦元素可以借助Document.querySelector()const focusedElement document.querySelector(:focus);这实际上是把 CSS 伪类当作选择器传给查询方法。它可行但存在一个明显的缺点每次调用都要执行一次完整的 DOM 选择器匹配写法上也多了一层间接性。30-seconds-of-code 仓库中的 query-selector-shorthand 片段 展示了如何用Function.prototype.bind()把querySelector绑定为$简写如果你经常做这类查询可以参考它来简化代码const $ document.querySelector.bind(document); // 等价于 document.querySelector(:focus) const focusedElement $(:focus);2.3 更直接的方式Document.activeElement相比之下document.activeElement是浏览器维护的属性级状态不是查询出来的结果因此更快直接读取内部状态无需选择器匹配更简洁一行代码、无参调用更可靠不依赖 CSS 伪类在查询引擎中的支持细节。// 推荐直接读取属性 const focusedElement document.activeElement;三个方案的能力对比如下方案代码形态适用场景备注CSS:focus样式表中的伪类聚焦态的视觉样式无法直接供 JS 逻辑读取document.querySelector(:focus)选择器查询需要选择器语法时性能略逊写法间接document.activeElement属性直读绝大多数 JS 焦点判断推荐首选直接且高效三、实战用activeElement解决典型问题3.1 表单校验中判断焦点是否在输入框内当用户点击页面其他区域时通常需要判断焦点是否已离开某个输入框以触发失焦校验。activeElement可以配合事件处理完成这一判断document.addEventListener(click, () { const active document.activeElement; const isInForm active active.matches(input, textarea, select); if (!isInForm) { // 焦点不在任何表单控件上执行全局校验或收起弹层 } });3.2 快捷键分发按焦点状态决定行为在富文本编辑器或全局快捷键系统中焦点在可编辑区域时按 Enter 应换行、焦点在按钮上时按 Enter 应触发按钮这类需求非常常见document.addEventListener(keydown, (event) { if (event.key ! Enter) return; const active document.activeElement; if (active active.tagName BUTTON) { // 焦点在按钮上交给浏览器默认行为 return; } // 焦点在别处执行自定义的 Enter 逻辑 event.preventDefault(); // ... });3.3 与focus()/blur()配合实现焦点管理聚焦状态是一个双向过程既可以通过element.focus()主动把焦点交给某个元素也可以用element.blur()释放焦点而document.activeElement则是观察这一状态的唯一状态读取口。典型用法是聚焦后立即读取确认例如实现点击按钮后把焦点交给弹层modalDialog.focus(); // 主动聚焦弹层容器 const isModalFocused document.activeElement modalDialog; // isModalFocused 为 true说明聚焦成功四、必须注意的两个概念边界原片段中特别强调了两点易错事项这里展开说明。4.1 可聚焦元素因浏览器与操作系统而异哪些元素可以被聚焦并非统一标准a、button、input、select、textarea等原生可聚焦控件基本一致但受tabindex属性、浏览器实现、操作系统输入法状态等因素影响实际可聚焦集合会有差异。例如在部分浏览器中设置了tabindex0的div可以通过 Tab 键聚焦某些移动端浏览器在无物理键盘时不会产生传统意义上的焦点contenteditable元素在不同内核中的聚焦表现也不完全一致。因此不要假设所有环境下的聚焦行为完全相同关键逻辑如自动聚焦跳转应做兼容性验证。4.2 焦点focus≠ 选区selection焦点表示当前接收键盘事件的对象而选区selection指的是文本内容的选中高亮。两者是两个独立的概念一个输入框可以同时拥有焦点和文本选区光标位置或高亮文本焦点在输入框上时用户可能并没有选中任何文本反之鼠标拖拽选中页面文本并不会改变document.activeElement的指向。const input document.querySelector(input); input.focus(); // 1. 赋予焦点 input.select(); // 2. 选中输入框内全部文本 // 此时 document.activeElement input // 但 selection 指向的是 input 内部的文本内容如果你需要的是当前选中的文本应使用window.getSelection()或input.selectionStart / selectionEnd而不是activeElement。五、小结Document.activeElement是浏览器提供的最直接、最高效的焦点探测 API它比 CSS:focus更适合交给 JavaScript 逻辑使用也比document.querySelector(:focus)更简洁可靠。使用它时务必记住两点可聚焦元素集合因浏览器与操作系统而异且焦点与文本选区是两个独立概念。掌握这一 API 后你可以将它与focus()/blur()、键盘事件、表单校验等能力组合快速构建出键盘可访问、交互状态明确的 Web 界面。更多同类浏览器 DOM 查询技巧可在仓库的 JavaScript DOM Querying 集合 中继续探索。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 seconds of code用 JavaScript 获取当前页面 URL 的完整指南30 seconds of code用 JavaScript 获取当前页面 URL 的完整指南 导读 在浏览器端开发中获取当前页面完整地址是最常见的需求之一教程文档30 seconds of code用纯 JavaScript 遍历 DOM 获取元素的祖先、父级、兄弟与子节点30 seconds of code用纯 JavaScript 遍历 DOM 获取元素的祖先、父级、兄弟与子节点 DOM 遍历是浏览器端 JavaScript教程文档30 Seconds of Code 实战用原生 JavaScript 获取元素内的全部图片30 Seconds of Code 实战用原生 JavaScript 获取元素内的全部图片 本指南围绕 30 seconds of code 仓库中 get教程文档创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考