在前端开发中，我们经常需要根据用户界面的焦点状态来触发特定的行为或更新UI。尤其当页面中存在大量相同类型但通过类名区分功能的元素时，准确判断哪个具有特定类名的元素当前获得了焦点，是一个常见的需求。本文将深入探讨如何利用 document.activeElement 属性结合 classList API，实现这一目标。
理解 document.activeElement
document.activeElement 是一个只读属性，它返回当前文档中获得焦点的元素。这个元素可以是输入框、按钮、链接，或者是任何设置了 tabindex 属性的元素。它的核心特性是：
- 单一性： 它总是返回一个单一的 Element 对象，表示当前唯一获得焦点的元素。
- 实时性： 它的值会随着用户交互（如点击、Tab键切换）或程序化操作（如 element.focus()）而动态更新。
常见误区与挑战
在尝试判断具有特定类名的元素是否获得焦点时，开发者常会遇到以下误区：
-
直接比较元素集合： 错误地将 document.activeElement 与 document.getElementsByClassName('className') 返回的 HTMLCollection 进行比较。例如：
立即学习“Java免费学习笔记（深入）”；
// 这是错误的比较方式 let elementsWithClass = document.getElementsByClassName('my-class'); let isFocused = (document.activeElement === elementsWithClass); // 永远为 falsedocument.activeElement 是一个具体的 Element 实例，而 elementsWithClass 是一个包含多个元素的集合，两者类型不同，无法直接进行等值比较。
-
静态检测的局限性： 在不结合事件监听的情况下，仅在页面加载时或某个固定时刻检测 document.activeElement，无法实时反映用户后续的焦点变化。例如：
// 仅在代码执行时检测一次，无法响应后续用户点击 var isFocused = document.activeElement.classList.contains("my-class");如果用户在代码执行后点击了另一个元素，isFocused 的值将不会更新。
focus() 方法与用户点击的区别： element.focus() 方法会明确地将焦点设置到指定元素上。而用户通过鼠标点击或键盘导航获得的焦点，其检测机制与 focus() 方法并无本质区别，document.activeElement 都会正确更新。问题往往出在检测逻辑的触发时机上。
正确检测带类名元素的焦点状态
要正确判断具有特定类名的元素是否获得了焦点，我们需要结合 document.activeElement 和 Element.prototype.classList 属性。
核心方法：classList.contains()
Element.prototype.classList 属性返回一个 DOMTokenList 接口，它提供了便捷的方法来操作元素的类名。其中，contains(className) 方法用于检查元素是否包含指定的类名，返回一个布尔值。
因此，判断当前焦点元素是否具有特定类名的正确方式是：
const activeElement = document.activeElement;
const hasSpecificClass = activeElement && activeElement.classList.contains('your-class-name');这里的 activeElement && 是一个安全检查，以防 document.activeElement 返回 null (例如，在某些浏览器中，当页面没有元素获得焦点时)。
结合事件监听实现实时检测
为了实时响应焦点变化，我们需要监听元素的 focus 和 blur 事件。一个更高效且推荐的做法是，为所有可能获得焦点的元素添加事件监听器，或者利用事件委托监听 focusin 和 focusout 事件。
示例代码：实时检测焦点元素的类名
以下示例展示了如何为页面中的所有输入框添加焦点和失焦事件监听器，并在每次焦点变化时，更新页面上显示的信息，包括当前焦点元素是否具有特定的类名。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点元素类名检测教程</title>
<style>
body { font-family: sans-serif; margin: 20px; }
input { margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.primary-focus { border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); }
.secondary-focus { border-color: #28a745; }
p { margin-top: 15px; }
b { color: #333; }
</style>
</head>
<body>
<h1>焦点元素类名检测</h1>
<input type="text" class="input-field primary-focus" placeholder="输入框 A (primary-focus)">
<br>
<input type="text" class="input-field secondary-focus" placeholder="输入框 B (secondary-focus)">
<br>
<input type="text" class="input-field" placeholder="输入框 C (无特定类)">
<br>
<input type="text" class="input-field primary-focus" placeholder="输入框 D (primary-focus)">
<p>当前焦点元素是否具有 'primary-focus' 类：<b id="isPrimaryFocused"></b></p>
<p>当前焦点元素的类名：<b id="activeElementClasses"></b></p>
<p>当前焦点元素标签名：<b id="activeElementTagName"></b></p>
<script>
// 获取所有可聚焦的输入框元素
const inputFields = document.querySelectorAll('.input-field');
const isPrimaryFocusedDisplay = document.getElementById('isPrimaryFocused');
const activeElementClassesDisplay = document.getElementById('activeElementClasses');
const activeElementTagNameDisplay = document.getElementById('activeElementTagName');
/**
* 更新页面上显示的焦点状态信息
*/
function updateFocusState() {
const activeEl = document.activeElement; // 获取当前焦点元素
// 判断当前焦点元素是否存在且是否具有 'primary-focus' 类
const isPrimaryFocused = activeEl && activeEl.classList.contains('primary-focus');
// 获取当前焦点元素的类名，如果无焦点则显示 '无'
const activeClasses = activeEl && activeEl.className ? activeEl.className : '无';
// 获取当前焦点元素的标签名
const activeTagName = activeEl ? activeEl.tagName.toLowerCase() : '无';
// 更新页面显示
isPrimaryFocusedDisplay.textContent = isPrimaryFocused ? '是' : '否';
activeElementClassesDisplay.textContent = activeClasses;
activeElementTagNameDisplay.textContent = activeTagName;
}
// 为每个输入框添加 focus 和 blur 事件监听器
// 这样在元素获得或失去焦点时，都会调用 updateFocusState 函数
inputFields.forEach(el => {
el.onfocus = updateFocusState;
el.onblur = updateFocusState;
});
// 页面加载时，也需要执行一次更新，以显示初始焦点状态（可能为body或无）
updateFocusState();
</script>
</body>
</html>在上述代码中：
- 我们获取了所有具有 input-field 类的输入框。
- 为每个输入框添加了 onfocus 和 onblur 事件监听器，确保在焦点状态改变时 updateFocusState 函数被调用。
- updateFocusState 函数内部，通过 document.activeElement 获取当前焦点元素。
- 然后，使用 activeEl.classList.contains('primary-focus') 来判断该元素是否具有 primary-focus 类。
- 结果被实时更新到页面上，方便用户观察。
注意事项
- 可聚焦元素： 只有可聚焦的HTML元素（如 <input>, <button>, <a>, <textarea>, <select> 或设置了 tabindex 属性的元素）才能成为 document.activeElement。
- 事件委托： 对于拥有大量可聚焦元素的复杂界面，为每个元素单独添加事件监听器可能会影响性能。此时，可以考虑使用事件委托，在父元素上监听 focusin 和 focusout 事件（它们会冒泡），然后在事件处理函数中检查 event.target。
- Shadow DOM： 如果你的应用使用了 Shadow DOM，document.activeElement 可能只会返回 Shadow Host。要获取 Shadow DOM 内部的焦点元素，你需要递归地检查 shadowRoot.activeElement。
- 无焦点状态： 当页面中没有元素获得焦点时（例如，用户点击了页面空白区域），document.activeElement 通常会返回 document.body 或 null。在进行 classList 操作前，务必进行空值检查，如 activeEl && activeEl.classList.contains(...)。
- 性能考量： 避免在 focus 或 blur 事件中执行过于复杂的DOM操作或计算，以保持界面的响应性。
总结
通过 document.activeElement 属性结合 classList.contains() 方法，我们可以高效且准确地判断当前获得焦点的元素是否具有特定的CSS类名。关键在于理解 document.activeElement 返回的是一个单一的 Element 对象，并结合 focus、blur 或 focusin、focusout 等事件监听器来实时更新焦点状态。掌握这一技巧，将有助于开发者构建更加动态、响应和用户友好的Web界面。
