[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度

JavaScriptまたはjQueryを使い、html要素が存在するかどうか調べる方法はいくつかあります。

jQueryを使ったやり方については、こちらで5つの方法が紹介されています。以下は三項演算子で短く書きなおしたものです。

( $("selector")[0] )? "有" : "無";
( $("selector").length > 0 )? "有" : "無";
( $("selector").get(0) )? "有" : "無";
( $("selector").size() )? "有" : "無";
( $("selector").is() )? "有" : "無";

これに加え、IDが設定されている要素の有無を調べるのなら、jQueryを使わずJavaScriptのみで以下のように書くのも良いでしょう。

( document.getElementById("id") != null )?  "有" : "無";

では上で挙げた6つのうち、一番速い方法はどれでしょうか。Firefox+Firebugで計測してみました。

結果はJavaScriptのみで書いたコードが最速でした。jQueryの余計なコードを通していないのですから当然でしょうか。この程度の内容ならjQueryを使わずとも煩雑なコードにはなりませんし、存在を確認したい要素にIDが設定されているならば、document.getElementById("id") != nullで調べるのがいいでしょう。

jQueryを使う方法のなかで一番速いのは$("selecter")[0]でした。シンプルな書き方ですし、IDを使っていない要素の有無を調べるならこの方法が良さそうです。そのほか、$("selector").get(0)、$("selector").size()、$("selector").lengthもそれほど速度で劣るわけではありません。

$("selector").is("*")はその他のものに比べて著しく遅いです。ワイルドカードを使っているせいかと思い、ワイルドカード無しでも計測してみましたが、やはり160msを超えてしまいました。$("selector").is("*")は避けた方が良さそうです。