理解 document.activeElement
在web开发中，document.activeelement 是一个非常有用的dom属性，它返回当前文档中获得焦点的元素。无论元素是通过用户交互（如点击或tab键）获得焦点，还是通过javascript的 element.focus() 方法编程获得焦点，document.activeelement 都会准确指向该元素。
需要注意的是，document.activeElement 返回的是一个具体的DOM元素实例。如果文档中没有任何元素获得焦点，或者焦点在文档之外（例如在浏览器地址栏），那么 document.activeElement 通常会指向 document.body 或 null。
判断具有特定类名的元素是否获得焦点
要判断一个具有特定类名的元素是否获得焦点，我们不能直接将 document.activeElement 与一个 HTMLCollection（例如 document.getElementsByClassName('your-class') 的结果）进行比较，因为 activeElement 是一个单一的元素，而 HTMLCollection 是一个元素集合。正确的做法是获取当前获得焦点的元素，然后检查它的 classList 是否包含目标类名。
以下是实现这一目标的核心方法：
// 假设我们要检查是否有元素带有 'my-class' 类名获得焦点
const isMyClassElementFocused = document.activeElement.classList.contains('my-class');
console.log(isMyClassElementFocused); // true 或 false这种方法简单直接，但它只能反映在执行代码时哪个元素获得焦点。为了实时响应焦点变化，我们需要结合事件监听器。
实时监听焦点变化
为了在元素获得或失去焦点时执行相应的逻辑，我们可以利用 focus 和 blur 事件。这些事件可以附加到单个元素上，也可以通过事件委托的方式附加到它们的父元素上。
以下是一个结合 focus 和 blur 事件来实时显示当前获得焦点的元素类名，并判断特定类名元素是否获得焦点的示例：
HTML 结构
我们首先定义一些可获得焦点的输入框，它们带有不同的类名，以及用于显示结果的段落。
<input type="text" class="input-field test1"> <input type="text" class="input-field test2"> <input type="text" class="input-field test3"> <input type="text" class="input-field test4"> <p>.test3 是否获得焦点: <b id="is-test3-focused"></b></p> <p>当前获得焦点的元素类名: <b id="active-element-class"></b></p>
JavaScript 逻辑
接着，我们编写JavaScript代码来监听所有输入框的 focus 和 blur 事件。在事件触发时，我们将更新显示区域的内容。
document.addEventListener('DOMContentLoaded', () => {
const targetClass = 'test3'; // 我们要检查的目标类名
const test3Element = document.querySelector(`.${targetClass}`); // 获取具体的 .test3 元素实例
const isTest3FocusedDisplay = document.getElementById('is-test3-focused');
const activeElementClassDisplay = document.getElementById('active-element-class');
// 遍历所有输入框并添加焦点/失焦事件监听器
document.querySelectorAll('.input-field').forEach(el => {
el.onfocus = updateFocusState;
el.onblur = updateFocusState;
});
// 初始设置，确保页面加载时显示正确状态
updateFocusState();
// 示例：程序化设置焦点，以观察效果
// test3Element.focus(); // 可以在页面加载后尝试取消注释这行，观察效果
function updateFocusState() {
const currentActiveElement = document.activeElement;
// 1. 判断具有特定类名的元素是否获得焦点
// 方法一：检查当前焦点元素的classList是否包含目标类
const isTargetClassFocused = currentActiveElement.classList && currentActiveElement.classList.contains(targetClass);
isTest3FocusedDisplay.textContent = isTargetClassFocused.toString();
// 方法二：检查当前焦点元素是否是特定的元素实例
// const isSpecificElementFocused = currentActiveElement === test3Element;
// isTest3FocusedDisplay.textContent = isSpecificElementFocused.toString();
// 2. 显示当前获得焦点的元素的所有类名
if (currentActiveElement && currentActiveElement !== document.body) {
activeElementClassDisplay.textContent = currentActiveElement.getAttribute('class') || '无类名';
} else {
activeElementClassDisplay.textContent = '无焦点元素';
}
}
});在这个示例中：
- 我们首先获取了所有带有 input-field 类名的输入框。
- 为每个输入框添加了 onfocus 和 onblur 事件处理器，它们都会调用 updateFocusState 函数。
- updateFocusState 函数的核心是 document.activeElement.classList.contains(targetClass)，它检查当前获得焦点的元素是否包含 test3 类。
- 同时，我们也展示了如何获取并显示当前焦点元素的完整类名。
注意事项
- 焦点元素类型： 只有可交互的元素（如 <input>, <button>, <textarea>, <select>, <a href="...">）以及设置了 tabindex 属性的元素才能获得焦点。
- document.body 或 null： 当页面加载时，或者当焦点从一个元素移开但没有新的元素获得焦点时（例如用户点击了页面背景），document.activeElement 可能会是 document.body 或 null。在进行 classList 操作前，最好检查 document.activeElement 是否有效且不是 document.body，以避免潜在的错误。
-
事件委托： 对于大量可获得焦点的元素，为每个元素单独添加事件监听器可能会影响性能。在这种情况下，可以考虑使用事件委托，将 focusin 和 focusout 事件（它们会冒泡）添加到它们的共同父元素上。
document.body.addEventListener('focusin', (event) => { // event.target 就是当前获得焦点的元素 if (event.target.classList.contains('my-class')) { console.log('带有 my-class 的元素获得焦点'); } }); - CSS 伪类 :focus： 如果只是想在元素获得焦点时改变其样式，CSS 的 :focus 伪类是更简洁高效的方法，无需 JavaScript。
总结
document.activeElement 属性是JavaScript中获取当前焦点元素的强大工具。结合 classList.contains() 方法和 focus/blur 事件监听器，我们可以精确地判断并实时响应具有特定类名的元素是否获得焦点。这对于实现复杂的表单验证、自定义焦点管理、无障碍功能以及其他需要根据焦点状态进行动态行为调整的Web应用至关重要。理解并正确运用这些技术，将有助于提升用户体验和应用的交互性。
