如何返回 HTML 文档中当前活动的元素？

在使用 JavaScript 操作 HTML 文档时，经常需要获取当前活动的元素。比如说，我们可能想要获取用户当前正在与之交互的表单元素或按钮等等。那么，如何返回 HTML 文档中当前活动的元素呢？

方法一：使用 document.activeElement 属性

在 JavaScript 中，我们可以通过访问 document.activeElement 属性来获取当前活动的元素。这个属性是只读的，它返回当前文档中获得焦点的元素。下面是一个简单的示例：

const activeElement = document.activeElement;
console.log(activeElement);

这个代码片段会在控制台输出当前活动元素的信息。需要注意的是，在某些情况下，比如页面刚刚加载完成时，没有元素获得焦点，此时 document.activeElement 的值会是 document.body。

方法二：使用事件监听器

除了直接访问 document.activeElement 属性之外，我们还可以使用事件监听器来跟踪用户交互并获取当前活动的元素。比如说，我们可以为页面中的所有表单元素添加一个 focus 事件监听器，这样当用户点击某个表单元素时，我们就可以立即获取到这个元素。下面是一个示例：

const formElements = document.querySelectorAll('input, select, textarea');
Array.from(formElements).forEach((element) => {
  element.addEventListener('focus', (event) => {
    const activeElement = event.target;
    console.log(activeElement);
  });
});

这个代码片段会添加一个 focus 事件监听器到文档中的所有表单元素，当用户点击其中某个元素时，就会触发监听器并输出当前活动元素的信息。

总结

在 JavaScript 中，我们可以使用 document.activeElement 属性或事件监听器来获取 HTML 文档中当前活动的元素。需要注意的是，有些情况下 document.activeElement 的值可能是 document.body，因此在使用时需要做好判断。