jQueryのis(':focus')をnativeのJavaScriptで再現する方法

Question

質問内容

jQueryでいう$('hoge').is(':focus');と同じことをJavaScriptでやりたいのですが可能でしょうか？

やりたいこと

対象の要素がフォーカスされているかどうかを取得したいです。
実現方法は2つあると思うのですが、前者ではなく後者のやり方で判断したいです

1. jQueryでいう$(':focus')のように、現在フォーカスされている要素を取得して対象の要素と一致するか見比べる方法
2. jQueryでいう$('hoge').is(':focus');のように、対象の要素がフォーカスされているか取得する方法

参考リンク

https://stackoverflow.com/questions/11277989/how-to-get-the-focused-element-with-jquery

Answer 1

document.querySelector('hoge').matches(':focus') でいいんじゃないでしょうか。

Answer 2

• https://github.com/jquery/jquery/blob/main/src/selector.js#L906-L910

focus: function( elem ) {
  return elem === document.activeElement &&
    document.hasFocus() &&
    !!( elem.type || elem.href || ~elem.tabIndex );
},

jQuery でも内部的には「前者」の方法で実装されています。ネイティブの JavaScript には「自身が focus された要素かどうか」を判定するメソッドは実装されていません。

前者の方法で document.activeElement と比較する他ありません。

Comments

[arcxor]

int32_t さんの回答の方が適切ですね。matches() が ":focus" をサポートしていることを把握していませんでした。

document.activeElement はフォーカスしている要素がない場合に body を返すなど、フォーカスとは別の意味を持つことがあるので document.activeElement を参照する場合は扱いに注意が必要そうです。