jQueryでDOM要素が存在するか確認してはならない

JavaScript/jQueryでDOM要素が存在確認処理結果(jsPref)

jQueryでDOM要素の存在を確認しない

ネット上にはjQueryでDOM要素が存在しているか確認する方法の記事がいくつか存在している。

しかし、結論から言うとjQueryでDOM要素が存在しているか確認する方法は処理が遅いので使用しないほうが良い。

ベンチマークがとれるjsPrefというサイトで処理速度を調べた結果、getElementsByClassName(‘bar’).lengthと$(‘.bar’)[0]とでは10倍以上の差が出る。

ちなみに最新のChromeおよびjQuery 1.12.0を使用した結果なのでブラウザがIEだとさらに遅く、jQuery の旧バージョンでよく利用されている1.8以下だと$(‘.bar’)[0]はさらに倍以上処理に時間がかかる。

jQueryでDOM要素が存在するか確認する方法はいくつかあるが$(‘.bar’)[0]が最速だ。(それでもこれだけ遅い)JavaScript/jQueryでDOM要素が存在確認処理結果(jsPref)

document.getElementById('foo') ? true : false;
document.querySelector('#foo') ? true : false;
document.getElementsByClassName('bar').length ? true : false;
document.querySelector('.bar') ? true : false;
$('#foo')[0] ? true : false;
$('.bar')[0] ? true : false;

getElementsByClassNameはquerySelectorよりも処理が速いがquerySelectorのように複数の要素を指定できないためquerySelectorのほうが使い勝手が良い。(処理速度もjQueryほどの差はない)

querySelectorが使用できるのはIEの場合、IE8以降だが現在IE7のサポートは終了しているので問題なく使用できる。

jsPref実行結果

JavaScript/jQueryでDOM要素が存在するか確認するサンプル