JavascriptのDOM検索頻度を減らす

Question

小さなプロジェクトからJqueryを取り除き、バニラjsでスクリプトを書き直している途中です。現在のコードでは、DOM要素を検索し、要素内の特定の要素を検索するためにjquery 'find'を使用するjquery実装があります。

var ImageCapture ={ 
    cacheDom : function(){ 
     this.form = $('#drawingBoard'); 
     this.saveBtn = this.form.find('#saveBtn'); 
     this.image = this.form.find('#image'); 
     this.results = this.form.find('#results'); 
    } 
} 

私は上記のJqueryコードを以下のようにバニラjsに変換しました。

var ImageCapture ={ 
     cacheDom: function() { 
      this.form = document.getElementById('drawingBoard'); 
      this.saveBtn = this.form.querySelector('#saveBtn'); 
      this.image = this.form.querySelector('#image'); 
      this.results = this.form.querySelector('#results'); 
     } 
    } 

新しい実装では正常に動作しているように見えるが、私はそれはバニラJSを使用してjQueryの実装を交換するのが正しい方法だ場合は必ずたかったですか？

ありがとうございます。

Answer 1

プレーンjs querySelectorAllセレクタとjQueryセレクタの動作の微妙な違いを示すために2つのjsfiddlesを作成しました。あなたは自然に彼らが同じように行動することを期待しますが、そうではありません。ここで

はjsの無地バージョンです：ここでhttps://jsfiddle.net/a81e2do3/

jQueryのです。要するにhttps://jsfiddle.net/a81e2do3/1/

、あなたはこのHTML持っている場合：あなたは、プレーンJS要素ノードオブジェクトを持っている場合

div#a > div#b > div#c 

を#bの場合、b.querySelector('#a #c')を実行してdiv＃cを選択することはできますが、jQueryで行うことはできません（これはjQueryの方が意味があります）。