jQueryでHTML要素があるかないか存在を判定する場合、様々な方法があり選ぶ理由も人それぞれで、どれを使ったらいいのか迷っている方のために、書き方や処理速度（パフォーマンス）を比較しているサイトをまとめましたので、選定する基準として参考になればと思います。
目次
要素の存在を確認する
jQueryでHTML要素の存在を調べるには、以下の5つの書き方があります。
5つの書き方
jQueryで指定したHTML要素に対して、存在していれば[true]、存在していなければ[false]を返すようにしたものを5パターン書いてみます。
|
1 2 3 4 5 |
($("selector")[0]) ? true : false; ($("selector").get(0)) ? true : false; ($("selector").size()) ? true : false; ($("selector").length) ? true : false; ($("selector").is()) ? true : false; |
コードの意味としては、[0]とget(0)、size()とlengthはほぼ一緒です。
処理速度（パフォーマンス）
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 |
結局、どの方法が最適か？
ぶっちゃけ、どれでも良いです。
著者の場合は速度重視なので、
|
1 |
$("selector")[0] |
を使います。
もちろん、ピュアなJavaScriptが最も速いですが、個人的にはjQueryのコードと混在するのはあまり好きではありません。
大量にループを回さない限り、どれも一緒だと思います。
また、lengthの方が括弧を使わないので可読性が増すといった意見もあります。
処理時間もまた違った計測結果なっています。
コメント