JS> getElementById VS querySelector

OwlCJ·2022년 2월 3일
0

Javascript

목록 보기
3/6

자바스크립트에서 요소를 컨트롤하는 방법은 여러가지가 있지만, 어떤 요소를 특정해서 컨트롤할때는 태그의 id값을 사용하는 getElementById 와 querySelector를 대표적이라고 할 수 있다.

let button = document.querySelector('#btn');
let button = document.getElementById('btn');

위의 두 문법은 둘다 버튼 변수에 아이디가 btn인 요소를 할당해준다는 점에서 동일하게 작동한다.

하지만 두 메소드는 작지만 소소한 차이들이 존재한다.🧐

querySelector 기준으로 차이점을 나열해보려한다

  • querySelector 가 처리속도가 조금 더 느림
  • querySelector 은 선택자를 다양하게 고를 수 있음(id, class etc..)
  • querySelector 은 조건을 만족하는 첫번째 요소를 가져옴
  • return 타입이 querySelector(NodeList) getElementById(HTMLCollection)으로 다름

정도의 차이가 있다. 두 메소드의 공통점으로는 명시된 조건의 요소를 찾지 못하면 null을 반환한다는 공통점도 있다.

정리하자면 querySelector 가 속도는 조금 느리지만 범용적으로 사용이 가능하다.

개인적으로 페이지 최적화나 속도를 위해서는 getElementById 나 getElementByClassName 을 사용하는게 좋다고 생각한다.🤔

큰 차이는 아니지만 개발자가 불편함 없이 같은 조건으로 사용이 가능하다면 위의 메소드를 사용하는게 좋지 않을까. 다만 모든 요소에 클래스나 아이디 속성을 부여하기 애매한 상황도 있기 때문에 querySelector도 적재적소에 사용한다면 좋은 대안이 될 것 같다. (jquery보다는 querySelector 가 빠른편이라고 한다.)

오늘은 동일한 기능을 하는 것으로 보이는 두 메소드에 대해 알아봤다. getElementByClassName 메소드 또한 비슷한 역활을 하기때문에 따로 명시하지는 않았다. (getElementById와 비슷한 차이가 있다 함) 그리고 리턴 타입에 따른 별도의 차이도 있을 것 같은데, 그 부분은 추가적인 학습이 필요할 것 같다.

profile
ios 개발자를 목표로 성장중입니다 🧐

0개의 댓글