在网页开发中，有时候我们需要知道当前哪个元素拥有焦点，以便进行一些特定的操作，比如验证输入框是否被正确填写。JavaScript 提供了多种方法来获取当前焦点元素的 ID。下面，我将通过一些实战技巧，帮助你轻松掌握这一技能。
方法一：使用 document.activeElement
document.activeElement 属性返回当前拥有焦点的元素。这是一个非常直接且常用的方法。
示例代码
// 获取当前焦点元素的 ID
var focusedElementId = document.activeElement.id;
console.log(focusedElementId); // 输出当前焦点元素的 ID
使用场景
这种方法适用于大多数情况，尤其是当你需要获取当前焦点元素的 ID 时。
方法二：监听 focus 事件
如果你需要在元素获得焦点时执行某些操作，你可以为元素添加 focus 事件监听器。
示例代码
// 为元素添加 focus 事件监听器
document.getElementById('myInput').addEventListener('focus', function() {
console.log('当前焦点元素的 ID 是：' + this.id);
});
使用场景
这种方法适用于你需要知道元素何时获得焦点的情况。
方法三：使用 querySelector 和 querySelectorAll
如果你想要选择具有特定类的元素，可以使用 querySelector 或 querySelectorAll。
示例代码
// 获取所有具有 'my-class' 类的元素
var elements = document.querySelectorAll('.my-class');
// 当其中一个元素获得焦点时，输出其 ID
elements.forEach(function(element) {
element.addEventListener('focus', function() {
console.log('当前焦点元素的 ID 是：' + this.id);
});
});
使用场景
这种方法适用于你需要选择具有特定类的元素，并对其焦点变化进行监听的情况。
总结
通过以上三种方法，你可以轻松地获取当前焦点元素的 ID。在实际开发中，根据具体需求选择合适的方法，可以让你的代码更加简洁、高效。希望这些实战技巧能帮助你更好地掌握 JavaScript 的这一功能。