[ JS / JavaScript ] 좋은 DOM 검색 방법

function updateHeaderText() {
  const header = document.querySelector('h1');
  header.textContent = '새로운 제목';
}

 

위의 js 코드는 updateHeaderText함수가 실행이 될 때마다 DOM tree에서 해당 요소를 찾는다. 그렇게 되면 매우 빈번하게 함수가 호출이 되고 성능에 영향이 있을 수 있다.

 

const header = document.querySelector('h1'); // DOM 요소 캐싱

function updateHeaderText() {
  header.textContent = '새로운 제목'; // 캐싱된 요소 사용
}

 

사용자와 상호작용 되는 DOM이 아니라면 자주 사용되는 DOM은 전역으로 둬서 스크립트가 실행되는 시점에 한 번만 실행되게 하자

---

document.querySelector ,    document.getElement* 어떤 것을 사용할까?

요소를 찾을때

querySelector

를 사용은 것 보다, 

getElement*

를 사용하는 것이 더 좋다.

 

querySelector는 getElement*보다 느릴 수 있으나, 그 차이는 대부분의 사용 사례에서 무시할 수 있을 정도다. 그러나 복잡한 선택자를 사용할 경우 성능에 영향을 줄 수 있다.

 

간단하고 빠른 ID, ClassName기반의 요소 접근이 필요하다면 getElement*를, 더 복잡한 선택자를 사용해야 한다면 querySelector를 사용하는 것이 적합하다.