자바에서 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 선택기 사이의 동작에 미묘한 차이가 있음을 보여주기 위해 두 개의 jsfiddle을 만들었습니다. 당신은 당연히 그들이 똑같이 행동 할 것이라고 기대하지만 그들은 그렇게하지 않을 것입니다. 당신이 일반 JS 요소 노드 객체가있는 경우

div#a > div#b > div#c 

:이 HTML이있는 경우 짧은에서 https://jsfiddle.net/a81e2do3/1/

: 여기

https://jsfiddle.net/a81e2do3/ jQuery를 수 있습니다 : 여기

는 일반 JS 버전입니다 #b를 사용하면 b.querySelector('#a #c')을 수행하고 div # c를 성공적으로 선택할 수 있지만 jQuery에서이를 수행 할 수는 없습니다.이 jQuery는 jQuery 방식을 더 잘 나타냅니다.