获取页面上当前激活（获得焦点）的元素

在 JavaScript 中，你可以使用 document.activeElement 属性来获取当前获得焦点的 DOM 元素。以下是几种不同场景下的实现方法：

1. 基本使用方法

// 获取当前获得焦点的元素
const activeElement = document.activeElement;

// 检查元素是否存在并输出信息
if (activeElement) {
  console.log('当前激活的元素:', activeElement);
  console.log('元素标签名:', activeElement.tagName);
  console.log('元素ID:', activeElement.id);
  console.log('元素类名:', activeElement.className);
} else {
  console.log('当前没有元素获得焦点');
}

2. 实时监听焦点变化

// 监听文档焦点变化
document.addEventListener('focusin', (event) => {
  console.log('元素获得焦点:', event.target);
});

document.addEventListener('focusout', (event) => {
  console.log('元素失去焦点:', event.target);
});

// 也可以使用更通用的方法
function logActiveElement() {
  console.log('当前激活元素:', document.activeElement);
}

// 定期检查（不推荐，仅作演示）
setInterval(logActiveElement, 1000);

3. React 中的实现

import { useState, useEffect } from 'react';

function ActiveElementTracker() {
  const [activeElement, setActiveElement] = useState(null);

  useEffect(() => {
    function handleFocusChange() {
      setActiveElement(document.activeElement);
    }

    // 初始设置
    handleFocusChange();
    
    // 添加事件监听
    document.addEventListener('focusin', handleFocusChange);
    document.addEventListener('focusout', handleFocusChange);

    return () => {
      // 清除事件监听
      document.removeEventListener('focusin', handleFocusChange);
      document.removeEventListener('focusout', handleFocusChange);
    };
  }, []);

  return (
    

      
当前激活的元素:
      {activeElement ? (
        

          
标签名: {activeElement.tagName}
          
ID: {activeElement.id || '无'}
          
类名: {activeElement.className || '无'}
        
      ) : (
        
没有元素获得焦点
      )}
      
      
      
      测试按钮
    
  );
}

4. 检查特定元素是否激活

// 检查特定元素是否获得焦点
function isElementActive(selector) {
  const element = document.querySelector(selector);
  return element && element === document.activeElement;
}

// 使用示例
if (isElementActive('#myInput')) {
  console.log('#myInput 当前获得焦点');
}

5. 处理 Shadow DOM 中的元素

function getDeepActiveElement() {
  let element = document.activeElement;
  
  while (element?.shadowRoot?.activeElement) {
    element = element.shadowRoot.activeElement;
  }
  
  return element;
}

// 使用示例
const deepestActiveElement = getDeepActiveElement();
console.log('最深层激活元素:', deepestActiveElement);

注意事项

1. iframe 中的元素：如果要获取 iframe 中的激活元素，需要先访问 iframe 的 document 对象

   const iframeActiveElement = document.getElementById('myIframe').contentDocument.activeElement;
   

2. 浏览器兼容性：document.activeElement 在所有现代浏览器中都支持良好

3. 初始状态：页面加载时，document.activeElement 通常是 元素

4. 可聚焦元素：不是所有元素都能获得焦点，只有特定的可聚焦元素（如 input, button, a 等）或设置了 tabindex 属性的元素才能获得焦点

5. 性能考虑：频繁检查 document.activeElement 可能会影响性能，建议使用事件监听而非轮询