jQueryで要素の存在を確認する5つの方法

6月 29, 2018

jQueryでHTML要素があるかないかを判定する場合、様々な方法があり選ぶ理由も人それぞれで、どれを使ったらいいのか迷っている方のために、書き方や処理速度（パフォーマンス）を比較しているサイトをまとめましたので、選定する基準として参考になればと思います。

要素の存在を確認する

要素の存在を調べるには、以下の5つの書き方があります。

5つの書き方

[0]とget(0)、size()とlengthはほぼ一緒です。

($("selector")[0])     ? true : false;
($("selector").get(0)) ? true : false;
($("selector").size()) ? true : false;
($("selector").length) ? true : false;
($("selector").is())   ? true : false;

処理速度（パフォーマンス）

FirefoxのFirebugというプラグインを使って計測した結果が紹介されてます。

コード	速度
`document.getElementById("id") != null`	0.019ms
`$("selector")[0]`	0.033ms
`$("selector").get(0)`	0.040ms
`$("selector").size()`	0.041ms
`$("selector").length`	0.069ms
`$("selector").is("*")`	0.169ms

引用：[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき

結果、どれを選ぶべきか？

ぶっちゃけ、どれでも良いです。
著者の場合は速度重視なので、

$("selector")[0]

を使います。
もちろん、ピュアなJavaScriptが速いですが、jQueryと混在するのはあまり好きではありません。
大量にループを回さない限り、どれも一緒だと思います。

また、lengthの方が括弧を使わないので可読性が増すといった意見もあります。
処理時間もまた違った計測結果なっています。

目次はこちら > jQueryを使う際の25個Tipsを確認してみる要素の存在有無を確かめるについてです。
jQuery 要素の存在チェック方法 - Uragami

このブログを検索

Minory