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

管理者

6年前

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の方が括弧を使わないので可読性が増すといった意見もあります。
処理時間もまた違った計測結果なっています。

Original:https://minory.org/jquery-check-selector.html
Source:Minory
Author:管理者